привязка данных с нокаутом foreach не работает - PullRequest
Новая
       29

привязка данных с нокаутом foreach не работает

0 голосов
/ 29 ноября 2018

Я новичок в нокауте и пытаюсь привязать данные к циклу foreach, используя observableArray

Ниже приведен мой код JS и HTML, может кто-то взглянуть на него и помочь мне с этим, куда я идунеправильно?Моя основная проблема - foreach не работает должным образом

JS-код 

define(function(require) {
    var app = require('durandal/app');
    var ko = require('knockout');
    var todoList = ko.observableArray([new Todo("test")]);
    return {
        todoName: ko.observable(),
        createTodo: function() {
            todoList.push(new Todo(this.todoName()));
            console.log(todoList().length);
        }
    };

    function Todo(name) {
        return {
            todoName: ko.observable(name)
        };
    }
});

Мой HTML-код 

<section>
    <h2>Create Todo</h2>
    <form class="form-inline">
        <fieldset>
            <label>Name</label>
            <input type="text" data-bind="value: todoName, valueUpdate: 'afterkeydown'" />
            <button type="submit" class="btn" data-bind="click: createTodo, enable: todoName">Click Me</button>
        </fieldset>
    </form>
</section>

<div class="row" data-bind="foreach: todoList">
    <div class="col-md-12">
        <label data-bind="text: todoName"></label>
    </div>
</div>

1 Ответ

0 голосов
/ 30 ноября 2018

Knockout ищет todoList внутри объекта, который вы используете в ko.applyBindings.Вместо создания переменной сделайте ее свойством возвращаемого объекта.

Вот рабочий фрагмент: 

function Todo(name) {
  return {
    todoName: ko.observable(name)
  };
}

function TodoViewModel() {
  return {
    todoList: ko.observableArray([new Todo("test")]),
    todoName: ko.observable(),
    createTodo: function() {
      this.todoList.push(new Todo(this.todoName()));
      console.log(this.todoList().length);
    }
  };
}

ko.applyBindings(TodoViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<section>
  <h2>Create Todo</h2>
  <form class="form-inline">
    <fieldset>
      <label>Name</label>
      <input type="text" data-bind="value: todoName, valueUpdate: 'afterkeydown'" />
      <button type="submit" class="btn" data-bind="click: createTodo, enable: todoName">Click Me</button>
    </fieldset>
  </form>
</section>

<div class="row" data-bind="foreach: todoList">
  <div class="col-md-12">
    <label data-bind="text: todoName"></label>
  </div>
</div>
...