Question

我正在学习构建一个简单的应用程序的Knockout.js。我坚持要从我的观点到模型中获取价值的地方。这是Model和ViewModel的代码。

var COMPONENT_NAME = 'task'
var Task = function () {

  var self = this,
      params = {};

      self.name = ko.observable();
      self.isChecked = ko.observable(false);


  // var initialize = function(name, isChecked) {
  //   params.name = ko.observable(name || "N/A");
  //   params.isChecked = ko.observable(isChecked || false)
  // }
  //
  // initialize(_name, _isChecked);

}

var TasksViewModel = function (_params) {

  var self = this;

  var  name = null,
      isChecked = false;

  self.tasks = ko.observableArray();

  self.newTask = ko.observable();

  self.addNewTask = function() {

    self.tasks.push(new Task());

    console.log(self.tasks.toString());
  };

  self.deleteTask = function(task) {

      self.tasks.remove(task);
  };

  //var initialize = function(params) {
      // self.newTask() = params;
  //}

  //initialize(_params);

}

ko.components.register(COMPONENT_NAME, {
    viewModel: {
      createViewModel: function(params) {
        console.log(params);
        return new TasksViewModel(params);
      }
    },
    template:'New Task:\
            <input data-bind="textInput: $root.name"/>\
            <button type="submit" data-bind="click: addNewTask">Add Task</button>\
            <div class="tasks-list">Tasks: </br>\
                <div data-bind="foreach: tasks">\
                    <input type="checkbox" data-bind="checked: $root.isChecked" />\
                    <label data-bind="text: $data.name, click: $parent.deleteTask"></label><br>\
                </div>\
            </div>'
});

ko.applyBindings(new TasksViewModel());

这是我的观点：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>knockout playground</title>
    <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="panel panel-default" data-bind="with: tasks">
        <div class="panel-heading">
            Task list demo
        </div>
        <div class="panel-body">

            <div data-bind="component: 'task'"></div>

        </div>
    </div>
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

每次尝试添加一个对象时，它都会添加一个空对象。我不知道自己在做什么错。任何帮助表示赞赏。

Answer 1

首先，您需要通过Task事件触发器将name参数传递给addNewTask函数类，获取name变量并将其传递到那里。

此外，如果我没记错的话，组件内的$ root应该是$ component

var COMPONENT_NAME = 'task'
var Task = function (name) {

  var self = this,
      params = {};

      self.name = ko.observable(name);
      self.isChecked = ko.observable(false);


  // var initialize = function(name, isChecked) {
  //   params.name = ko.observable(name || "N/A");
  //   params.isChecked = ko.observable(isChecked || false)
  // }
  //
  // initialize(_name, _isChecked);

}

var TasksViewModel = function (_params) {

  var self = this;
  self.name = ko.observable('');
  self.isChecked = false;

  self.tasks = ko.observableArray();

  self.newTask = ko.observable();

  self.addNewTask = function() {
  var name = self.name();
    self.tasks.push(new Task(name));
    self.name('');
  };

  self.deleteTask = function(task) {

      self.tasks.remove(task);
  };

  //var initialize = function(params) {
      // self.newTask() = params;
  //}

  //initialize(_params);

}

ko.components.register(COMPONENT_NAME, {
    viewModel: {
      createViewModel: function(params) {
        return new TasksViewModel(params);
      }
    },
    template:'New Task:\
            <input data-bind="textInput: $component.name"/>\
            <button type="submit" data-bind="click: addNewTask">Add Task</button>\
            <div class="tasks-list">Tasks: </br>\
                <div data-bind="foreach: tasks">\
                    <input type="checkbox" data-bind="checked: $root.isChecked" />\
                    <label data-bind="text: $data.name, click: $parent.deleteTask"></label><br>\
                </div>\
            </div>'
});

ko.applyBindings(new TasksViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="panel panel-default" data-bind="with: tasks">
        <div class="panel-heading">
            Task list demo
        </div>
        <div class="panel-body">

            <div data-bind="component: 'task'"></div>

        </div>
    </div>

无法从视图到模型获取值

1 个答案: