Question

我正在尝试在一些现有的应用程序中连接knockout.js。绑定以一些神秘的方式起作用。如果我使用p标签，它会完全搞乱绑定。如果我使用标签标签，它也会破坏绑定。

例如：

<p data-bind="foreach: currentFields">
   <p data-bind="foreach: props">
       <span data-bind="text: type"></span>
   </p>
</p>

这不会奏效。如果我改为跨度它有效。但后来我遇到了标签标签的问题。如果我删除标签绑定有效。

如果我使用除了普通跨度以外的任何东西，似乎自动绑定完全被搞砸了。有没有合适的javascript绑定库？ Angular.js在这方面是否更好？因为重写所有现有的HTML，包括CSS只是为了取悦knockout.js真的没什么好玩的。）

示例代码：

<p>
    <span data-bind="foreach: currentFields">
        <span data-bind="text: value"></span>
        <span data-bind="text: type"></span>
        <span data-bind="text: selected"></span>
        <span data-bind="text: props"></span>
        <span data-bind="foreach: props, visible: selected">
            <li>
                <label>Labela:</label>
                <span>
                    <span data-bind="text: type"></span>   
                    <input type="text" data-bind="value: type, valueUpdate: 'afterkeydown'" required="required" maxlength="140" ></input>
                </span>
            </li>
        </span>

    </span>
</p>

var Property = function(type) {
    this.type = ko.observable(type);
}

var Field = function(value) {
    this.props = ko.observableArray([new Property("a"), new Property("b")]);
    this.type = ko.observable('text');
    this.value = ko.observable(value);
    this.selected = ko.observable(false);
};

var myViewModel = function () {
    var self = this;

    this.currentFields = ko.observableArray([new Field("a"), new Field("b")]);
    this.currentField = ko.observable();

    this.addField = function() {
        self.currentFields.push(new Field("xyz"));
    };

    this.selectField = function(field) {
        ko.utils.arrayForEach(self.currentFields(), function(item) {
            item.selected(false);
        });
        field.selected(true);
        self.currentField(field);
    };

};

$(document).ready(function() {
    ko.applyBindings(new myViewModel());
});

Answer 1

你能看一下this fiddle并告诉我的工作没有按预期工作吗？

<span data-bind="foreach: currentFields">
    <span data-bind="text: value"></span>
    <span data-bind="text: type"></span>
    <span data-bind="text: selected"></span>
    <span data-bind="text: ko.toJSON(props)"></span>
    <span data-bind="foreach: props, visible: selected">
        <li>
            <label>Labela:</label>
            <span>
                <span data-bind="text: type"></span> 
                <input type="text" data-bind="value: type, valueUpdate: 'afterkeydown'" required="required" maxlength="140"></input>
            </span>
        </li>
    </span>
</span>

我更改了这个绑定：

<span data-bind="text: props"></span>

进入：

<span data-bind="text: ko.toJSON(props)"></span>

Answer 2

如果您的HTML无效，浏览器会在Knockout有机会解析它之前重新格式化它。原始HTML中的嵌套元素在浏览器中被嵌套。

<p>元素有特定的限制 - 它不能包含其他段落或列表或基本上任何类型的块元素。

请参阅http://www.w3.org/TR/html5/grouping-content.html#the-p-element

Knockout.js神奇的数据绑定

2 个答案: