javascript – Knockout不工作

2019-08-30 23:43:57 阅读：206 来源： 互联网

标签：javascript razor asp-net-mvc asp-net-mvc-4 knockout-js

我是网络编程的新手,我正在尝试将Knockout Contact表单实现到我使用MVC 4 Razor构建的网站上.我直接从Knockout的网站上看到了这个例子并测试了我在JSFiddle中的变化;一切都很好.但是当我将代码带入我的cshtml时,它将不会获取Knockout代码.我对正在发生的事情感到茫然.有帮助吗？细节将是有益的,因为有很多我不知道.在cshtml上的Knockout联系人网格之后有一个BeginForm帮助器.这是一个问题吗？

Javascript：AddTeamMember.js

var initialData = [
    {
        name: "Danny", email: "LaRusso@stars.come", phone: "(555) 121-2121", dept: "Print"
    },
    {
        name: "Sensei", email: "Miyagi@stars.com", phone: "(555) 432-3466", dept: "AMS"
    }
    ];

    var ContactsModel = function (contacts) {
        var self = this;
        self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
            return { name: contact.name, email: contact.email, phone: contact.phone, dept: contact.dept };
        }));

        self.addContact = function () {
            self.contacts.push({
                name: "",
                email: "",
                phone: "",
                dept: ""
            });
        };

        self.removeContact = function (contact) {
            self.contacts.remove(contact);
        };

        self.addPhone = function (contact) {
            contact.phones.push({
                type: "",
                number: ""
            });
        };

        self.removePhone = function (phone) {
            $.each(self.contacts(), function () { this.phones.remove(phone) })
        };

        self.save = function () {
            self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
        };

        self.lastSavedJson = ko.observable("")
    };

    ko.applyBindings(new ContactsModel(initialData));

CSHTML：

@{
    ViewBag.Title = "Register";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
<script src="~/MyJS/AddTeamMember.js"></script>

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>

<div class="registerForm">
    <div class='memInfoForm'> 

        <h2>Contacts</h2>
        <div id='contactsList'>
            <table class='contactsEditor'>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Dept</th>
                </tr>
                <tbody data-bind="foreach: contacts">
                    <tr>
                        <td>
                            <input data-bind='value: name' />
                            <div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div>
                        </td>
                        <td><input data-bind='value: email' /></td>
                        <td><input data-bind='value: phone' /></td>
                        <td><input data-bind='value: dept' /></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p>
            <button data-bind='click: addContact'>Add a contact</button>
            <button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
        </p>

        <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>   

    </div>


    @using (Html.BeginForm("Register", "Register", FormMethod.Post, new { id = "registerForm" }))
...

解决方法:

当您的DOM准备就绪时,必须执行此行.

ko.applyBindings(new ContactsModel(initialData));

引自KO网站：

To activate Knockout, add the following line to a block:

06001

You can either put the script block at the bottom of your HTML
document, or you can put it at the top and wrap the contents in a
DOM-ready handler such as jQuery’s $function.

http://knockoutjs.com/documentation/observables.html

标签：javascript,razor,asp-net-mvc,asp-net-mvc-4,knockout-js
来源： https://codeday.me/bug/20190830/1771712.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Knockout不工作