Question

嗨，我已经尝试过一段时间了，但我是KnockoutJS的一个完整的菜鸟。想法是你添加一个输入，然后它会显示自己的设置，如名称attr占位符，必需等等。但我遇到了几个问题。

我已经成功地完成了一些工作，但由于某些原因，所需要的总是如此。我遇到的另一个问题是添加更多 - 我是否正确地说，然后我需要在js中添加更多的observable？我可以不做某种循环。这是我的代码请帮助。

<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());

Answer 1

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

{
  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() );

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

<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>

试试这个互动演示：

＆＃13;

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());

＆＃13;

.console {
  background-color: lightgrey;
  padding: 1rem;
  margin-top: 1rem;
}

＆＃13;

<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>

＆＃13;

KnockoutJS Add和Loop Observables

1 个答案: