Мобильная модель представления Kendo не привязана к <DIV>

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? Где-то вы должны позвонить:

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

---

Удалите вложенные представления, так что измените:

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

чтобы:

<div id="bookContent" >

---

Вы можете удалить это:

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

потому что представления уже MVVM связаны с тем, что вы указываете в data-model приписывать. Вы указываете data-model="book" но нет window.book переменная.

Вы, вероятно, хотите сделать book свойство в вашей ViewModel, которое, я полагаю, также не существует в данный момент. Может быть, это должно быть book?

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

---

Наконец, ваши кодовые наборы question2 в нескольких местах, но это не определенная переменная, поэтому она просачивается в глобальную область видимости.

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

Вы можете включить строгий режим:

(function () {
    "use strict";

который обнаружит эту ошибку:

Uncaught ReferenceError: вопрос2 не определен

---

Посмотрите, имеет ли смысл этот рабочий пример: http://dojo.telerik.com/OxISo