Question

`

＆＃13;

var data = { Name: "Test",
    Items: ["sample1", "sample2", "sample3","DESIGN"]      
};

function ViewModel(data) {
    var self = this;
    self.saved = ko.observable(false);
    self.Name = ko.observable(data.Name);
    self.Items = ko.observableArray(ko.utils.arrayMap(data.Items, function(item) {
        return { value: ko.observable(item) };
    }));
                                    
    self.addItem = function() { self.Items.push({ value: ko.observable("") }); };
    self.removeItem = function(data) { 
        self.Items.remove(data);
    };
    
     self.SaveItem = function() { self.Items.push({ value: ko.observable("") }); };
    self.SaveItem = function(data) { 
         //self.Items.save(data); 
         self.saved(true);
    };
}
$(document).ready(function() {ko.applyBindings(new ViewModel(data));
                             
            $("#slider").slider();                 
                             
                             });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div>
    Name: <span data-bind="text: Name"></span>
</div>
<div>
    Items: <button data-bind="click: addItem">Add Item</button>
</div>
<div>
    <table>
        <tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"></tbody>
    </table>
</div>
    <button data-bind="click: SaveItem">SAVE</button>
<script type="text/html" id="itemTemplate">
    <tr>
        <td data-bind="visible: !$parent.saved()">
            <input data-bind="value: value" />
            <a href="#" data-bind="click: $parent.removeItem">X</a>
        </td>
       <td data-bind="visible: $parent.saved()">
            <span data-bind="text: value"></span>
            <div id="slider"></div>
        </td>
    </tr>
</script>

＆＃13;

我使用knockout.js在数组中有一个项目我面临的问题是当这些项目被保存时，我将其编码为在每个项目下显示一个滑块。它只显示在一个下面。有人可以解释为什么它不会使用下面的视图显示在它们之下吗？

Answer 1

下面我给你代码来做你正在尝试做的事情：使用class属性识别div，选择它，并在每个上调用jQuery UI滑块。我给你这个解决方案，因为你显然只是在学习，这是一种基本的工具。

但是，这不是使用Knockout构建应用程序的好方法。

在Knockout中，除非编写custom binding handler，否则不会使用jQuery来拉取DOM的各个部分并对其进行操作，这将是应用滑块小部件的正确方法。如果你还没有通过Knockout tutorial，我建议你这样做。然后在上面的链接和also here上阅读有关自定义绑定处理程序的信息。

通过实验学习有其地位，但最好从更有条理的演示文稿中建立基础知识。

var data = {
  Name: "Test",
  Items: ["sample1", "sample2", "sample3", "DESIGN"]
};

function ViewModel(data) {
  var self = this;
  self.saved = ko.observable(false);
  self.Name = ko.observable(data.Name);
  self.Items = ko.observableArray(ko.utils.arrayMap(data.Items, function(item) {
    return {
      value: ko.observable(item)
    };
  }));

  self.addItem = function() {
    self.Items.push({
      value: ko.observable("")
    });
  };
  self.removeItem = function(data) {
    self.Items.remove(data);
  };

  self.SaveItem = function() {
    self.Items.push({
      value: ko.observable("")
    });
  };
  self.SaveItem = function(data) {
    //self.Items.save(data); 
    self.saved(true);
  };
}
$(document).ready(function() {
      ko.applyBindings(new ViewModel(data));

      $(".slider").each(function() {
        $(this).slider();
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div>
  Name: <span data-bind="text: Name"></span>
</div>
<div>
  Items:
  <button data-bind="click: addItem">Add Item</button>
</div>
<div>
  <table>
    <tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"></tbody>
  </table>
</div>
<button data-bind="click: SaveItem">SAVE</button>
<script type="text/html" id="itemTemplate">
  <tr>
    <td data-bind="visible: !$parent.saved()">
      <input data-bind="value: value" />
      <a href="#" data-bind="click: $parent.removeItem">X</a>
    </td>
    <td data-bind="visible: $parent.saved()">
      <span data-bind="text: value"></span>
      <div class="slider"></div>
    </td>
  </tr>
</script>

使用knockout.js在数组中的每个项目下添加一个滑块

1 个答案: