无法从视图到模型获取值

Question

我正在学习 Knockout.js 构建一个简单的应用程序。 我坚持从我的视图到模型可以获取值的地方。 这是模型和视图模型的代码。

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

首先，您需要通过addNewTask事件触发器将 name 参数传递给Task函数类，获取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 个解决方案

解决方案1
1 已采纳 2019-01-28 15:39:46

无法从视图到模型获取值

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-01-28 15:39:46

解决方案1
1 已采纳 2019-01-28 15:39:46