KnockoutJS添加和循环Observables

KnockoutJS Add and Loop Observables

本文关键字：Observables 循环 添加 KnockoutJS      更新时间：2023-09-26

嗨，伙计，我已经试着把这件事做好一段时间了，但我完全不懂KnockoutJS。这个想法是你添加一个输入，然后它会显示自己的设置，比如name attr占位符、required等。但我遇到了几个问题。

我设法找到了一些工作，但出于某种原因，要求总是正确的。我遇到的另一个问题是添加更多——我说的对吗？然后我需要在js中添加更多的可观察性？我可以不做一些循环吗。这是我的代码，请帮忙。

<div class="input-row">
  <div class="input-item">            
     <input type="text" data-bind="attr: { name: itemName, placeholder: itemPlaceholder, value : itemValue, required : itemRequired }" />         
  </div>
  <div class="input-settings">
    name:
    <input type="text" data-bind="value: itemNameSetting">
    <br/>
    placehoder:
    <input type="text" data-bind="value: itemPlaceholderSetting">
    <br/>
    required:
    <select data-bind="value: itemRequiredSetting">
      <option value="true">true</option>
      <option value="false">false</option>
    </select>
    <br/>   
    maxlength:
    <br/>
    defaultvalue:
    <input type="text" data-bind="value: itemValueSetting">
    <br/>
  </div>
</div>
<button>+ ADD MORE INPUTS</button>

JS

var ViewModel = function() {
    this.itemNameSetting        = ko.observable(); 
    this.itemPlaceholderSetting = ko.observable();
    this.itemRequiredSetting    = ko.observable();
    this.itemValueSetting       = ko.observable();
    this.itemName = ko.pureComputed(function() {            
        return this.itemNameSetting();
    }, this);
    this.itemPlaceholder = ko.pureComputed(function() {           
        return this.itemPlaceholderSetting();
    }, this);
    this.itemRequired = ko.pureComputed(function() {
      return this.itemRequiredSetting();         
    }, this);
    this.itemValue = ko.pureComputed(function() {           
        return this.itemValueSetting();
    }, this);
};
ko.applyBindings(new ViewModel());

这个东西有多个属性-名称、占位符、值等等：

{
  name: 'foo',
  placeholder: 'foo goes here',
  value: 'bar'
}

但你需要很多。在Javascript中，一个很好的方法是构建一个构造函数：

var InputItem = function InputItem(name, placeholder, value) {
  this.name        = name;
  this.placeholder = placeholder;
  this.value       = value;
}

现在我们可以随心所欲地制作它们：

var item1 = new InputItem('foo', 'foo goes here', 'bar');
var item2 = new InputItem('bar', 'bar goes here', 'baz');
item1.placeholder
// returns 'foo goes here'
item2.name
// returns 'bar'
item2.value = 'something else'
// item 2's value is now changed to 'something else'

但由于这是Knockout，我们希望我们的属性是可观察的：

var InputItem = function InputItem(name, placeholder, value) {
  this.name        = ko.observable(name);
  this.placeholder = ko.observable(placeholder);
  this.value       = ko.observable(value);
}
var item1 = new InputItem('foo', 'foo goes here', 'bar');
item1.name()
// returns 'foo'
item1.placeholder('kittens')
// item 1's placeholder is now changed to 'kittens'

这里有一个数据模型，它包含单个"事物"所需的所有数据，即您的案例中的输入。现在，我们需要一个包含所有数据模型的视图模型，以及用户添加更多数据模型的方法：

var ViewModel = function ViewModel() {
  var that = this;
  this.inputItems = ko.observableArray([]);
  this.addInput = function addInput() {
    that.inputItems.push( new InputItem() );
  };
}
ko.applyBindings( new ViewModel() );

在我们的标记中，我们用foreach:迭代我们可观察的inputItems数组中的所有InputItems

<div data-bind="foreach: inputItems">
  <!-- everything inside here is rendered once for every InputItem -->
  <input type="text" data-bind="value: name">
  <input type="text" data-bind="value: placeholder">
</div>
<button data-bind="click: addInput">Add another input</button>

试试这个交互式演示：

var InputItem = function InputItem(name, placeholder, value) {
  this.name        = ko.observable(name);
  this.placeholder = ko.observable(placeholder);
  this.value       = ko.observable(value);
}
var ViewModel = function ViewModel() {
  var that = this;
  this.inputItems = ko.observableArray([]);
  this.addInput = function addInput() {
    that.inputItems.push(new InputItem());
  };
}
ko.applyBindings(new ViewModel());
.console {
  background-color: lightgrey;
  padding: 1rem;
  margin-top: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: inputItems">
  <li>
    <!-- everything inside here is rendered once for every InputItem -->
    <input type="text" data-bind="value: name" placeholder="input name">
    <input type="text" data-bind="value: placeholder" placeholder="input placeholder">
  </li>
</ul>
<button data-bind="click: addInput">Add another input</button>
<div class="console">
  <h1>You have added <span data-bind="text: inputItems().length"></span> input items</h1>
  <ul data-bind="foreach: inputItems">
    <li>
      Name: <span data-bind="text: name"></span> with placeholder <span data-bind="text: placeholder"></span>
    </li>
  </ul>
</div>

相关文章：