Question

I am not sure what is happening but I am not able to bind my view model to any HTML tags. I want to display values of book variable in my span tag of DIV.

This is my js file

(function () {
    var currentAnswer;
    var AnswerDetail;
    var book2 = {question2:"A", answer2:"B"};
     window.AnswerDetail = {
    show: function () {
        //Pull the ISBN number from the query string
        var location = window.location.toString();
        var id = location.substring(location.lastIndexOf('?') + 4);

        // Filter the DataSource bt ISBN to get the selected record
        window.Answers.data.filter({
            field: "id",
            operator: "eq",
            value: id
        });
        currentAnswer = window.Answers.data.view()[0];
        //alert(currentAnswer.question);
        question2 = currentAnswer.question;
        //alert(currentAnswer.answer);
        return(currentAnswer.question);

    },
    hide: function () {
        // When the user navigates away from the page, remove the filter
        window.Answers.data.filter([]);
    }
    ,
    open: function () {
        // When the user navigates away from the page, remove the filter
        question2 = currentAnswer.question;
    }
};
    var book = kendo.observable({
        question2: "Query"
    });
    kendo.bind($(('#bookContent')), book);
}());

This is my HTML file
<div id="AnswerContent2" data-model="book" data-role="view" data-title="Details" data-layout="main" data-show="AnswerDetail.show" data-hide="AnswerDetail.hide" data-reload="true" data-transition="fade">
    <div id="bookContent" data-model="book" data-role="view" >
        <p><span id="q" data-bind="text: question2"></span> </p>
    </div>
</div>

函数运行正常，变量正在获取值。但我无法创建viewmodel并分配给DIV。事实上，我所有的viewmodel创建和绑定到DIV都面临着这个问题。请指教。

Answer 1

这里似乎有很多问题......

也许你只是忘了在你的代码中包含它，但是你在哪里创建了Kendo Mobile Application？在某个地方你应该打电话给：

var app = new kendo.mobile.Application(document.body);

删除嵌套的＆＃39;视图，以便更改：

<div id="bookContent" data-model="book" data-role="view" >

为：

<div id="bookContent" >

您可以删除此内容：

kendo.bind($(('#bookContent')), book);

因为视图已经被MVVM绑定到data-model属性中指定的任何内容。您指定data-model="book"但没有window.book变量。

您可能希望在ViewModel上创建book属性，我认为目前还不存在。也许它应该是book？

window.book = kendo.observable({
    question2: "Query"
});

最后，您的代码会在几个地方设置question2，但这不是已定义的变量，因此它会泄漏到全局范围。

question2 = currentAnswer.question; // this becomes window.question2

您可能想要启用strict mode：

(function () {
    "use strict";

将检测到此错误：

未捕获的ReferenceError：未定义问题

查看此工作示例是否更有意义：http://dojo.telerik.com/OxISo

Kendo移动视图模型不绑定到<div> </div>

1 个答案: