标签: knockout-templating

我看不出这里有什么问题,但使用以下Knockout模板无法显示图像:

<script type="text/html" id="legend-template">       
    <div><input type="checkbox" data-bind="click : doSomething" ></input>
        <img width="16px" height="16px" data-bind="src: 'imagePath'" />          
        <span data-bind="text : label"> </span>
    </div>        
</script>

这个绑定的对象看起来像这样:

tut.myObject= function (imagePath, label) {
    this.label = ko.observable(label);
    this.imagePath = ko.observable(imagePath || liveString + '/Content/images/marker.png');   
};

tut.myObject.prototype = {
    doSomething: function () { alert("do what?");
     }
};

渲染HTML对象时,我看到标签,然后单击复选框调用doSomething.

TIA.

在我的HTML中,我可以定义这些淘汰的foreach绑定:

<!-- ko foreach: customer -->
   <div data-bind="text: id" />
<!-- /ko -->

VS

<div data-bind="foreach: customer">
    <div data-bind="text: id" />
</div>

这两种方法之间的差异在哪里？

我一直在寻找,我很有信心这是一个新问题,而不是像标题所暗示的重复.:)

基本上,我正在尝试找出KnockoutJS在使用jQuery模板之类的模板渲染后创建的可订阅事件.

我使用内置的"afterRender",但我发现如果清除了可观察数组,它就不会触发.我构建了这个演示来说明这个问题:http://jsfiddle.net/farina/YWfV8/1/.

另外,我知道我可以写一个自定义处理程序......但这对我需要的东西来说似乎没必要.

我只想在模板完成渲染后触发一个事件.

可以像这样在KnockoutJS中使用外部模板吗？

<script type="text/html" id="a_template" src="templates/a_template.html">
</script>

我尝试过这个解决方案,但没有让它运转起来.

我知道这不是一个长期使用的好方法,但是为了排除故障,有什么方法可以在绑定模板时传递一个简单的字符串,然后将其作为模板中的变量进行访问？例如,如果这是我的约束:

<!-- ko template: { name: tmplOne }, myvar: 'apple' -->

这是tmplOne:

<div>
    <span>Fruit: </span>
    <span data-bind="text: myvar"></span>
</div>

这将导致以下结果:

fruit: apple

即使我必须在名为"fruit"的viewmodel中声明一个observable,我可以手动将其设置为模板绑定吗？

我正在尝试设置通用的Knockout模板,可以根据数据类型在编辑和只读模式之间切换.如果您曾经使用过ASP.NET的动态数据:就像他们的字段模板一样.例如:

<script type="text/html" id="text">
    <!-- ko if: $root.editable -->
        <input type="text" data-bind="value: $data" />
    <!-- /ko -->

    <!-- ko ifnot: $root.editable -->
        <span data-bind="text: $data"></span>
    <!-- /ko -->
</script>

这是这样使用的:

<label><input type="checkbox" data-bind="checked: editable" /> Editable</label>

<p>Name: <input data-bind="value: name" /></p>
<p>Name2: <span data-bind="template: { name: 'text', data: name }"></span></p>

使用以下视图模型:

    var viewModel = {
        name: ko.observable("Brian"),
        editable: ko.observable(true)
    };

我们的想法是能够在字段级别使用模板,如"Name2"示例,而不是显式元素/控件.这允许在编辑和读取模式之间轻松切换整个表单,而不需要大部分重复标记.这还允许重用通用数据类型编辑/显示标记,例如使用日期字段等的日期选择器等.

该问题
将$data在模板中的伪变量没有双向绑定.它将反映observable中的当前值,但输入控件的更改不会设置该值.

我怎样才能获得双向绑定$data？

另见这个jsfiddle

在knockoutjs 1.2.1我能做到:

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>

<script id='Bar'>
    {{if $item.fooMode}} FOO! {{/if}}
</script>

我试图将其翻译为1.3.0beta

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>

<script id='Bar'>
    <span data-bind="if: $item.fooMode">FOO!</span>
</script>

但新的本机模板引擎不尊重templateOptions.

还有其他方法可以将任意数据传递到模板中吗？

我有一个ul元素,通过模板绑定填充.

<script type="text/html" id="someTemplate">
<li>
   <span data-bind="text: someText">
</li>
</script>

<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}">
</ul>

但我希望第一个 li-tag不是来自模板的li-tag而是另一个带有按钮的li-tag,它不会连接到someElemets数组.如果我这样做的话

<ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}">
    <li><button data-bind=click: doSomething">Click me</button></li>
</ul>

然后li-tag with button将是渲染后的最后一个.解决这个问题的最佳方法是什么？

有没有办法配置一个Knockout组件来替换容器元素而不是将其内容嵌套在容器元素中？

例如,如果我有一个my-custom-element使用以下模板注册的自定义组件:

<tr>
    <p>Hello world!</p>
</tr>

是否可以使用这样的组件:

<table>
    <tbody>
        <my-custom-element></my-custom-element>
    </tbody>
</table>

最终产品是这样的:

<table>
    <tbody>
        <tr>
            <p>Hello world!</p>
        </tr>
    </tbody>
</table>

而不是:( Knockout默认情况下渲染组件的方式)

<table>
    <tbody>
        <my-custom-element>
            <tr>
                <p>Hello world!</p>
            </tr>
        </my-custom-element>
    </tbody>
</table>

根据这个问题的答案,似乎这个功能内置于模板引擎中,我假设在渲染组件模板时也会使用它.

是否存在指定的组件应与呈现方式renderMode的replaceNode？

我知道"虚拟元素"语法,它允许在HTML注释中定义组件:

<table>
    <tbody>
        <!--ko component { name: 'my-custom-element' }--><!--/ko-->
    </tbody>
</table>

但我真的不喜欢这种语法 - 在评论中编写真正的代码感觉就像一个肮脏,肮脏的黑客.