敲除JS键合

Question

这是一个小提琴

我有这个html：

<div class="margin:0px; padding:0px; outline:0; border:0;" data-bind="with: notesViewModel">
        <table class="table table-striped table-hover" data-bind="with: notes">
            <thead><tr><th>Date Logged</th><th>Content</th><th>Logged By</th><th></th></tr>
            </thead>
            <tbody data-bind="foreach: allNotes">
                <tr>
                    <td data-bind="text: date"></td>
                    <td data-bind="text: compressedContent"></td>
                    <td data-bind="text: logged"></td>
                    <td><img src="/images/detail.png" data-bind="click: $root.goToNote.bind($data, $index())" width="20" alt="Details"/></td>
                </tr>
            </tbody>
        </table>

        <div class="noteView" data-bind="with: chosenNote">
            <div class="info">
                <p><label>Date:</label><span data-bind="text: date"></span></p>
                <p><label>Logged:</label><span data-bind="text: logged"></span></p>
            </div>
            <p class="message" data-bind="html: content"></p>
            <button class="btn btn-default" data-bind="click: $root.toNotes">Back to Notes</button>
        </div>

        <div class="editor-label" style="margin-top:10px">
            Notes
        </div>
        <div class="editor-field">
            <textarea id="contact_note" rows="5" class="form-control" data-bind="value: $root.noteContent"></textarea>
            <p data-bind="text: $root.characterCounter"></p>
            <button class="btn btn-info" data-bind="click: $root.saveNotes">Save</button>
            <div data-bind="html: $root.status">

            </div>   
        </div>
    </div>

这个JavaScript使用的是敲除：

var notesViewModel = function () { 
    var self = this;
    self.notes = ko.observable(null);
    self.chosenNote = ko.observable();
    self.allNotes = new Array();
    self.user = "user1";
    // behaviours
    self.goToNote = function (noteIndex) {
        self.notes(null);
        self.chosenNote(new note(self.allNotes[noteIndex]));
    };
    self.toNotes = function () {
        self.chosenNote(null);
        self.notes({ allNotes: $.map(self.allNotes, function (item) { return new note(item); }) });
        console.log(self.notes());
    }

    self.noteContent = ko.observable();
    self.saveNotes = function () {
        var request = $.ajax({
            url: "EnquiryManagement/Contact/SaveNotes",
            type: "GET",
            dataType: "json",
            data: { id: "1322dsa142d2131we2", content: self.noteContent() }
        });
        request.done(function (result, message) {
            var mess = "";
            var err = false;
            var imgSrc = "";
            if (message = "success") {
                if (result.success) {
                    mess = "Successfully Updated";
                    imgSrc = "/images/tick.png";
                    self.allNotes.push({ date: new Date().toUTCString(), content: self.noteContent(), logged: self.user });
                    self.toNotes();
                } else {
                    mess = "Server Error";
                    imgSrc = "/images/redcross.png";
                    err = true;
                }
            } else {
                mess = "Ajax Client Error";
                imgSrc = "/images/redcross.png";
                err = true;
            }

            self.status(CRTBL.CreateMessageOutput(err, mess, imgSrc));
            self.noteContent(null);
            setTimeout(function () {
                self.status(null);
            }, 4000);
        });
    };
    self.status = ko.observable();

    self.characterCounter = ko.computed(function () {
        return self.noteContent() == undefined ? 0 : self.noteContent().length;
    });
};

var note = function (data) {
    var self = this;
    console.log(data.date);
    self.date = CRTBL.FormatIsoDate(data.date);
    self.content = data.content;
    self.compressedContent = data.content == null ? "" : data.content.length < 25 ? data.content : data.content.substring(0, 25) + " ...";
    self.logged = data.logged;
    console.log(this);
};

ko.applyBindings(new notesViewModel());

当我第一次加载页面时，它说：

不明错误:无法解析绑定。消息:未定义ReferenceError: notes；绑定值: with: notes

但是，我传递它为null，所以它不应该显示任何东西，因为当我执行函数goToNote然后执行goToNotes时，它将可观察到的notes设置为null

那么为什么我不能从这个null值开始呢？

Answer 1

然而，就像bcmcfc所做的那样，由于我的场景是一个多视图模型场景，我不认为他的解决方案是正确的。

为了获得正确的结果，首先我将self.notes = ko.observable(null);外推到一个viewModel中，这使得进行表绑定更加容易。

然后，为了修复绑定问题，而不是为绑定设置一个元素，我只是这样做了：

ko.applyBindings({
    mainViewModel: new mainViewModel(),
    notesViewModel: new notesViewModel()
});

在我的原始代码中，我有两个viewModels，这就是我得到这个错误的原因。使用此方法的关键是：

我不制造亲情！

与其将viewModel绑定到特定的dom元素，后者很容易更改，而且必须使用ko进行更改，另外，如果我添加了更多的viewModels，那么它就会变得更加复杂。我只是做了：

data-bind="with: viewModel"

这样，我就可以绑定到任何DOM对象，并且我可以有很多我喜欢的东西。

这就是解决我帖子的办法。

这是小提琴

Answer 2

问题是你在哪里：

<div data-bind="with: notesViewModel">

这使得它在您的notesViewModel中寻找一个属性"notesViewModel“，这个属性并不存在。

如果您只有一个视图模型，您只需删除该数据绑定，它就能正常工作。

但是，如果希望将视图模型具体应用于该div，而不是整个页面，请给它一个ID或其他形式的访问器，并将其添加为applyBindings中的第二个参数，如下所示：

HTML：

<div id="myDiv">

联署材料：

ko.applyBindings(new notesViewModel(), document.getElementById('myDiv'));

这通常只有在同一页面中有多个视图模型时才有必要。