使用敲除的数据绑定选项

Question

我有一个菜单应用于每个显示的输入框。 我应用了敲除数据绑定选项。我遇到问题的问题是将其正确放置在视图模型中。有人能指出我应该放在哪里。您将看到菜单出现但下拉菜单中没有文字。 感谢

＆＃13;

＆＃13;

ko.observableArray.fn.pushAll = function(valuesToPush) {
    var underlyingArray = this();
    this.valueWillMutate();
    ko.utils.arrayPushAll(underlyingArray, valuesToPush);
    this.valueHasMutated();
    return this;
};



function Users(user_id, password) {
    this.user_id = ko.observable();
    this.password = ko.observable();
}

var viewModel = {
    users: ko.observableArray([]),
     availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
    addUser: function() {
        this.users.push({
            user_id: "",
            password: ""
        });
    },
    addJSON: function() {
        var JSONdataFromServer = '[{"user_id":"frances","password":"password1"},{"user_id":"joe","password":"password2"}]';
        var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

        // option 1
        //ko.utils.arrayPushAll(this.users(), dataFromServer);
        //this.users.valueHasMutated();
        // option 2
        //for (var i = 0, j = dataFromServer.length; i < j; i++)
        //this.users.push(dataFromServer[i]);
        //option 3
        this.users.pushAll(dataFromServer);
    }

};

viewModel.users();
ko.applyBindings(viewModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div class='liveExample'> 
    
    <form method='POST'> 
        <p>You are estimating for <span data-bind='text: users().length'>&nbsp;</span> Resource(s)</p> 
        <table data-bind='visible: users().length > 0'> 
            <thead> 
                <tr> 
                    <th>Resource</th> 
                    <th>User Levels</th>
                    <th /> 
                </tr> 
            </thead> 
            <tbody data-bind='template: { name: "userRowTemplate", foreach: users }' /> 
        </table> 
        
        <button data-bind='click: addUser'>Add Resource</button> 
   
    </form> 
    
    <script id='userRowTemplate' type='text/html'> 
        <tr>
<td><input class='required' data-bind='value: user_id, uniqueName: true' /></td>
<td> <select data-bind="options: availableCountries"></select></td>
 
          
        </tr>
    </script> 
    
    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将$parent添加到html中的availableCountries，因为它位于foreach绑定中，请参阅documentation。

＆＃13;

＆＃13;

ko.observableArray.fn.pushAll = function(valuesToPush) {
    var underlyingArray = this();
    this.valueWillMutate();
    ko.utils.arrayPushAll(underlyingArray, valuesToPush);
    this.valueHasMutated();
    return this;
};



function Users(user_id, password) {
    this.user_id = ko.observable();
    this.password = ko.observable();
}

var viewModel = {
    users: ko.observableArray([]),
     availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
    addUser: function() {
        this.users.push({
            user_id: "",
            password: ""
        });
    },
    addJSON: function() {
        var JSONdataFromServer = '[{"user_id":"frances","password":"password1"},{"user_id":"joe","password":"password2"}]';
        var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

        // option 1
        //ko.utils.arrayPushAll(this.users(), dataFromServer);
        //this.users.valueHasMutated();
        // option 2
        //for (var i = 0, j = dataFromServer.length; i < j; i++)
        //this.users.push(dataFromServer[i]);
        //option 3
        this.users.pushAll(dataFromServer);
    }

};

viewModel.users();
ko.applyBindings(viewModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div class='liveExample'> 
    
    <form method='POST'> 
        <p>You are estimating for <span data-bind='text: users().length'>&nbsp;</span> Resource(s)</p> 
        <table data-bind='visible: users().length > 0'> 
            <thead> 
                <tr> 
                    <th>Resource</th> 
                    <th>User Levels</th>
                    <th /> 
                </tr> 
            </thead> 
            <tbody data-bind='template: { name: "userRowTemplate", foreach: users }' /> 
        </table> 
        
        <button data-bind='click: addUser'>Add Resource</button> 
   
    </form> 
    
    <script id='userRowTemplate' type='text/html'> 
        <tr>
<td><input class='required' data-bind='value: user_id, uniqueName: true' /></td>
<td> <select data-bind="options: $parent.availableCountries"></select></td>
 
          
        </tr>
    </script> 
    
    
</div>

＆＃13;

＆＃13;

＆＃13;