Knockout 组件嵌套模板书写注意问题

在进行Knockout组件嵌套模板编写时,会有多个引号的使用,特别是单引号和双引号同时使用时,这里有一个例子【1】:

    templateEngine.addTemplate("ko_simpleGrid_grid", "            <table class=\"ko-grid\" cellspacing=\"0\" data-bind=\"\">                <thead>                    <tr data-bind=\"foreach: columns\">                       <th><div><span class=\"adjustCol_left\"> </span><span data-bind=\"text: headerText\"></span>                        <span class=\"adjustCol_right\" data-bind=\"event:{mousedown:$parent.headTdMousedown}\"> </span></div></th>                    </tr>                </thead>                <tbody data-bind=\"foreach: itemsOnCurrentPage\">                   <tr data-bind=\"foreach: $parent.columns\">                       <td data-bind=\"attr:{ prop1:typeof rowText == 'function' ? rowText($parent) : $parent[rowText] }, click:$root.cellEdit \">                        		<div data-bind='component: {name:\"ColumnEditor\", params:{editortype:editortype, value:typeof rowText == \"function\" ? rowText($parent) : $parent[rowText], editing:false}}'></div>                       </td>                    </tr>                </tbody>            </table>");

在这里,注意这一行:

(1)正确的写法

<div data-bind='component: {name:\"ColumnEditor\", params:{editortype:editortype, value:typeof rowText == \"function\" ? rowText($parent) : $parent[rowText], editing:false}}'></div>\

value的赋值逻辑为:判断表格模型的父模型rowText数据类型是否为function,若为function则执行该函数获取值;否则使用父模型中的值。在这里整个一行字符串包含在大的模板字符串中,data-bind使用了单引号来书写绑定内容,这时,若再在绑定里使用单引号,则需要转义,如上行(1)。

假如写成这样,则是错误的:

(2)错误的写法

<div data-bind='component: {name:\"ColumnEditor\", params:{editortype:editortype, value:typeof rowText == 'function' ? rowText($parent) : $parent[rowText], editing:false}}'></div>\

虽然这是一个本应该注意的问题,但在使用场景较复杂的情形,很容易忘记转义,而错误的写法却导致错误非常难查。

作为经验,进行记录,以供碰到类似问题时作为参考。

参考:

【1】Page Grid:http://knockoutjs.com/examples/grid.html

时间: 2024-08-30 16:35:12

Knockout 组件嵌套模板书写注意问题的相关文章

vue-父子组件嵌套的示例

组件注册: // 注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' }) 注册局部组件 var childComponent = Vue.extend({ template: '<p>this is child template</p>' }); Vue.component("parent",{ template: '<di

组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的时候,最好在<template>下添加一个标签(比如div),在这个标签里面写我们的组件. 例如: 1 <template> 2 <div> 3 <!--你的组件代码--> 4 </div> 5 </template> 我这边就是用这种方

Vue.js之组件嵌套小demo

Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件 Header.vue文件: 1 <!--1模板:html结构 --> 2 <template> 3 <header> 4 <h1>{{title}}</h1> 5 </header> 6 </template> 7

vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

### 什么是组件? 将代码进行复用 组件是实例的拓展子类 组件继承自实例,实例有的组件大部分都有,稍有变异 ### 组件创建 创建组件模板的2种方式: 1.通过template标签     template:"#tpl" 2.通过字符串模板   template:"<h1>吴启浪</h1>" ### 全局组件 所有的实例都可以使用 Vue.component("wql",{ template:"<h1&g

Angular2组件开发—模板的逻辑控制(二)

使用分支逻辑 如果组件的模板需要根据某个表达式的不同取值展示不同的片段,可以使用NgSwitch系列指令来动态切分模板.比如右边示例中的广告组件EzPromotion,需要根据来访者性别的不同推送不同的广告: NgSwitch包含一组指令,用来构造包含多分支的模板: NgSwitch NgSwitch指令可以应用在任何HTML元素上,它评估元素的ngSwitch属性值,并根据这个值 决定应用哪些template的内容(可以同时显示多个分支): 1 <any [ng-switch]="exp

Angular2组件开发—模板语法(二)

directives - 使用组件 在Angular2中,一个组件的模板内除了可以使用标准的HTML元素,也可以使用自定义的组件! 这是相当重要的特性,意味着Angular2将无偏差地对待标准的HTML元素和你自己定义的组件.这样, 你可以建立自己的领域建模语言了,这使得渲染模板和视图模型的对齐更加容易,也使得模板的语义性 更强: 声明要在模板中使用的组件 不过,在使用自定义组件之前,必需在组件的ViewAnnotation中通过directives属性声明这个组件: 1 @View({ 2 d

React入门---组件嵌套-5

组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件BodyIndex.js 项目框架应该为: 底部组件footer.js 和主体组件BodyIndex.js代码编译: 1. header.js (之前有编译过) import React from 'react'; import ReactDOM from 'react-dom'; //创建一个类

React.js 基础入门二--组件嵌套

组件:在设计接口的时候,将常用元素(按钮,表单字段,布局组件等)分解成定义好接口的可重用组件.这样下次你在创建同样界面就可以少写很多代码,这意味着更快的开发时间,更少的bug,和更少的内容下载. 将上章节Index.html中Js部分修改为: <script type="text/jsx">   // 注意此处                 // 定义web组件 (<font color="#ff0000">MessageBox 错误组件嵌

ReactJS学习笔记(二)-组件嵌套与组件复用

我们终要远行,最终告别稚嫩的自己. 使用React来构建web应用,每个页面都将是多个组件组成,并且相互嵌套来构成的,接下来就学习下组件的嵌套. 一.组件嵌套: 背景交代: 1.创建一个html,包含引用的相关js.需要被渲染的div: 2.创建一个有label与input标签组成的简单组件 - IvanInput,并可以通过传入数组来渲染多组label与input标签,拥有不同的label名称.inputType.inputRef.inputName及input的onChange事件: 3.创