Fatal编程技术网
  • jquery/
  • Jquery 如何使用；加上；使用嵌套视图模型绑定淘汰JS？

Jquery 如何使用；加上；使用嵌套视图模型绑定淘汰JS？

jquery html knockout.js

Jquery 如何使用；加上；使用嵌套视图模型绑定淘汰JS？,jquery,html,knockout.js,knockout-3.0,Jquery,Html,Knockout.js,Knockout 3.0,我正试图写一个模板来填写多人的表格。我不想使用“foreach”绑定或模板。我只是想用一个按钮将所有数据保存在一个简单的表单中，该表单包含5个输入，该按钮将把这个人添加到observableArray中，并为下一个人清除表单 我已将我的全部代码粘贴到下面： <html> <head> <title>Test Knockouts</title> </head> <body> <div id="rootDi

我正试图写一个模板来填写多人的表格。我不想使用“foreach”绑定或模板。我只是想用一个按钮将所有数据保存在一个简单的表单中，该表单包含5个输入，该按钮将把这个人添加到observableArray中，并为下一个人清除表单

我已将我的全部代码粘贴到下面：

<html>
<head>
    <title>Test Knockouts</title>
</head>
<body>
    <div id="rootDiv">
        <ul data-bind="with: Person">
            <li data-bind="event: { click: $data.setupPersonTypeForm.bind($data, 'Member') }">
                <a href="#" aria-controls="home">
                    <span class="radio-label">Member</span>
                </a>
            </li>
            <li data-bind="event: { click: $data.setupPersonTypeForm.bind($data, 'Guest') }">
                <a href="#" aria-controls="messages">
                    <span class="radio-label">Guest</span>
                </a>
            </li>
            <li data-bind="event: { click: $data.setupPersonTypeForm.bind($data, 'Employee') }">
                <a href="#" aria-controls="profile">
                    <span class="radio-label">Employee</span>
                </a>
            </li>
        </ul>
        <div>
            Person Name:
            <input type="text" data-bind="text: PersonName" /><br />
            Person Age:
            <input type="text" data-bind="text: PersonAge" /><br />
            Person Type:
            <input type="text" data-bind="text: PersonType" /><br />
            Person Country:
            <input type="text" data-bind="text: PersonCountry" /><br />
            Person NetWorth:
            <input type="text" data-bind="text: PersonNetWorth" />
        </div>
    </div>

    <script src="jquery-2.1.4.js"></script>
    <script src="knockout-3.4.0.js"></script>

    <script type="text/javascript">

        $(document).ready(function (e) {

            var element = document.getElementById("rootDiv");
            ko.applyBindings(rootVM, element);

            var RootVM = function (data) {
                var self = this;

                self.Id = ko.observable();
                self.Name = ko.observable();
                self.Location = ko.observable();
                self.TypeId = ko.observable();
                self.Age = ko.observable();

                self.Person = ko.observableArray([new PersonVM()]);
            }
            var rootVM = new RootVM();


            var PersonVM = function (data) {
                var self = this;

                self.Id = ko.observable();
                self.PersonName = ko.observable();
                self.PersonType = ko.observable();
                self.PersonAge = ko.observable();
                self.PersonCountry = ko.observable();
                self.PersonNetWorth = ko.observable();

                self.PersonTypeIdPlaceholder = ko.observable();
                self.ShowEmployeeTitleField = ko.observable(false);

                self.setupPersonTypeForm = function (personType) {

                    self.ShowEmployeeTitleField(false);

                    switch (personType) {

                        case "Member":
                            self.PersonTypeIdPlaceholder("Member ID");
                            break;
                        case "Guest":
                            self.PersonTypeIdPlaceholder("Guest ID");
                            break;
                        case "Employee":
                            self.PersonTypeIdPlaceholder("Employee ID");
                            self.ShowEmployeeTitleField(true);
                            break;
                    }
                }

                self.setupPersonTypeForm('Member');

                self.Property = ko.observableArray([new PropertyVM()]);
            }

            var PropertyVM = function (data) {
                var self = this;

                self.Id = ko.observable();
                self.PropertyPlace = ko.observable();
                self.PropertySize = ko.observable();
                self.PropertyName = ko.observable();
                self.PropertyAge = ko.observable();
            }
        });
    </script>
</body>
</html>


测试淘汰赛

    

  • 

    • 

  • 

    • 

  • 

    • 


人名：


人龄：


人员类型：


个人国家：


个人网络：
$（文档）.ready（函数（e）{
var元素=document.getElementById（“rootDiv”）；
应用绑定（rootVM，元素）；
var RootVM=函数（数据）{
var self=这个；
self.Id=ko.observable（）；
self.Name=ko.observable（）；
self.Location=ko.observable（）；
self.TypeId=ko.observable（）；
自我年龄=可观察（）；
self.Person=ko.observearray（[newpersonvm（）]）；
}
var rootVM=新的rootVM（）；
var PersonVM=函数（数据）{
var self=这个；
self.Id=ko.observable（）；
self.PersonName=ko.observable（）；
self.PersonType=ko.observable（）；
self.PersonAge=ko.observable（）；
self.PersonCountry=ko.observable（）；
self.PersonNetWorth=ko.observable（）；
self.PersonTypeIdPlaceholder=ko.observable（）；
self.ShowEmployeeTitleField=ko.可观察（假）；
self.setupPersonTypeForm=函数（personType）{
self.ShowEmployeeTitleField（假）；
开关（个人类型）{
案例“成员”：
self.personTypedPlaceHolder（“会员ID”）；
打破
案例“来宾”：
self.personTypedPlaceHolder（“客人ID”）；
打破
案例“雇员”：
self.personTypedPlaceHolder（“员工ID”）；
self.ShowEmployeeTitleField（真）；
打破
}
}
self.setupPersonTypeForm（“成员”）；
self.Property=ko.observearray（[newpropertyvm（）]）；
}
var PropertyVM=函数（数据）{
var self=这个；
self.Id=ko.observable（）；
self.PropertyPlace=ko.observable（）；
self.PropertySize=ko.observable（）；
self.PropertyName=ko.observable（）；
self.PropertyAge=ko.observable（）；
}
});
我得到以下错误：

knockout-3.4.0.js:72未捕获的引用错误：无法处理 绑定“with:function（）{return Person}”消息：Person不是 明确的

我哪里出了问题

任何帮助都将不胜感激

从这一行开始：

ko.applyBindings(rootVM, element);
…
rootVM
是
未定义的
，您尚未为其分配任何值。您想将其移动到后的

var rootVM = new RootVM();
…这反过来需要在

var PersonVM = function (data) { ... };
…因为它使用
PersonVM

只悬挂声明，不悬挂作业。如果您有：

(function() {
    console.log(foo);

    var foo = 42;
})();
…您看到的是未定义的
，而不是42，因为该代码被解释为：


(function() {
    var foo = undefined;

    console.log(foo);

    foo = 42;
})();


这在你的代码中一直在发生

至少还有几个其他问题：


  • 您使用的是
    Person
    ，就好像它是一个单一的东西，但您将它定义为一个事物数组。一旦解决了上述问题，就会出现这样一个问题：
    单击
    事件无法绑定，因为数组没有
    setupPersonTypeForm
    方法（您的
    人员
    有，而不是它所在的数组）
    • 

  • 您正在使用列表下方的属性，这些属性仅存在于
    Person
    上，但仅在列表上使用带有：Person的
    • 
如果您的目标是拥有一个人员列表，并且能够使用表单添加/编辑该列表中的人员，那么将演示如何使用“项目”而不是“人员”来完成几乎相同的操作
    
下面是一个简单的例子，答案在上下文中重复：
    


    功能项目（标题、优先级）{
this.title=ko.observable（title | |“”）；
this.priority=ko.observable（priority | | |“Medium”）；
}
函数ProjectViewModel（）{
var self=这个；
this.priorityOptions=ko.observearray（[“高”、“中”、“低”）；
this.projects=ko.observearray（）；
this.editing=ko.observable（新项目（））；
this.addProject=函数（）{
this.projects.push（this.editing（））；
编辑（新项目（））；
};
}
ko.applyBindings（新的ProjectViewModel（），document.body）

    
标题：
优先：
添加项目

    
项目：
()

    从此行开始：
    

    ko.applyBindings(rootVM, element);

    
…
    rootVM
    是
    未定义的
    ，您尚未为其分配任何值。您想将其移动到后的
    

    var rootVM = new RootVM();

    
…这反过来需要在
    

    var PersonVM = function (data) { ... };

    
…从那以后