javascript – Knockout.js：push item – >指定新的DOM元素

我有一个人的列表,看起来像这样：
他们的名字不可编辑(列表是通过ajax加载的,我只希望新的条目可以编辑)

<tbody data-bind="foreach: people">
    <tr>
        <td><input data-bind='text: name' readonly="readonly"
            class="form-control input-sm" type="text" /></td>
    </tr>
</tbody>

然后我有一个按钮来添加新元素：

<button class="btn btn-default btn-sm" data-bind='click: addPerson'>
    Add
</button>

我的观点模型：

function Peopleviewmodel() {
    var self = this;
    self.people = ko.observableArray([]);

    self.addPerson = function() {
        self.people.push({
            name: ""
        });
    };      
}

function Person(data) {
    this.name = ko.observable(data.name);
}

如何在函数“addPerson”中指定我的DOM元素,以便我添加的DOM元素不是readonly =“readonly”,是否可以使用Knockout？

谢谢 – 詹姆斯

解决方法

您可以使用可写属性扩展Peron模型：

function Person(name,writable) {
    this.name = ko.observable(name);
    this.writable= ko.observable(writable || false);
}

然后在添加人员时,将其设置为true：

self.addPerson = function() {
    self.people.push(new Person("",true));
};

在渲染HTML时：

<input data-bind="value: name,attr: { readonly: !writable() }"
       class="form-control input-sm" type="text" />

(请注意,我将绑定处理程序从文本更改为值)