Question

我将一个observable绑定到一个文本输入字段，并在单击一个按钮时将其值添加到一个knockout observable数组中。推送后，我正在重置observable，但文本字段仍然显示值。以下是我的代码。

var data = [
    { Id: 1, Name: "abc" },
    { Id: 2, Name: "def" },
    { Id: 3, Name: "ghi" },
    { Id: 4, Name: "jkl" }
];

var viewModel = function () {
    var self = this;
    //data
    self.tags = ko.observableArray(data);
    self.tagToAdd = ko.observable();

    //behaviour
    self.addTag = function () {
        self.tags.push({ Name: self.tagToAdd() });
        self.tagToAdd("");
    };

};


$(function () {
    var vm = new viewModel();
    ko.applyBindings(vm);
});

这是我的HTML代码：

    <input type="text" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown'" />
<button data-bind="click: addTag">+ Add</button>

    <div data-bind="template: 'tagsTemp'">
    </div>
    @section Scripts
    {
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="https://rawgit.com/BorisMoore/jquery-tmpl/master/jquery.tmpl.js"></script>
    <script id="tagsTemp" type="text/html">    
            {{each tags}}        
                <span>${Name}</span>
            {{/each}}   
    </script>

请帮助并指导我。

Answer 1

我检查过它正在使用上面的绑定和敲除foreach列表，我使用的代码如下：

   var data = [  
  { Id: 1, Name: "abc" },    
  { Id: 2, Name: "def" },  
  { Id: 3, Name: "ghi" },  
  { Id: 4, Name: "jkl" }
];

var viewModel = function () {  
    var self = this;  
    //data  
    self.tags = ko.observableArray(data);  
    self.tagToAdd = ko.observable();  

    //behaviour
    self.addTag = function () {
        self.tags.push({ Name: self.tagToAdd() });
        self.tagToAdd("");
    };

};


$(function () {  
    var vm = new viewModel();  
    ko.applyBindings(vm);  
});  

    @{  
    ViewBag.Title = "Home Page";  
}

    <h3>after adding setting observable to empty string do not clear textbox?</h3>

       <input type="text" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown'" />
    <button data-bind="click: addTag">+ Add</button>

       <div data-bind="foreach: tags">
           <label data-bind="text:Name"></label>
       </div>

如果不是这样，请告诉我......

添加设置observable到空字符串后不清除文本框？

1 个答案: