0

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

例如:

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

这是行不通的。如果我更改为跨度,它会起作用。但是后来我遇到了标签标签的问题。如果我删除标签,则绑定有效。

如果我使用除了普通跨度之外的任何东西,似乎自动绑定完全搞砸了。是否有合适的 javascript 绑定库?Angular.js 在这方面更好吗?因为仅仅为了取悦 knockout.js 而重写所有现有的 HTML 包括 CSS 真的一点都不好玩 :)

示例代码:

<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());
});
4

2 回答 2

0

你能看看这个小提琴并告诉什么没有按预期工作吗?

<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>
于 2013-09-20T11:51:11.807 回答
0

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

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

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

于 2013-09-20T20:57:40.990 回答