knockout.js и свойство не найдено в шаблоне Jquery - PullRequest
Новая
       3

knockout.js и свойство не найдено в шаблоне Jquery

0 голосов
/ 10 августа 2011

Я получаю "caseStudy не определено" с кодом ниже.Я должен добавить полный префикс app.viewModel.caseStudy.showFlawDetails, чтобы не ошибка. 

 app.viewModel.caseStudy = {};
        app.viewModel.caseStudy.cases = ko.observableArray();
        app.viewModel.caseStudy.selectedCaseId = ko.observable(0);
        app.viewModel.caseStudy.selectedCase = ko.mapping.fromJS(caseModel);
app.viewModel.caseStudy.showFlawDetails = function (index) {
        console.log(index);
    };
ko.applyBindings(app.viewModel);

<div class="Flaws" data-bind='template: { name: "flawTemplate", data: caseStudy.selectedCase.Flaws }'>
    </div>
    <script id="flawTemplate" type="text/html">
        {{each(index, value) $data}}
        <div class="flaw">
        <div class="Title" data-bind="click: caseStudy.showFlawDetails(index)"> ${value.Title} </div>
        <div class="Items">
            <div>Title: <input type="text" data-bind="value: value.Title" /></div>
            <div>Check: <input type="text" data-bind="value: value.Check" /></div>
            <div>Instructor: <input type="text" data-bind="value: value.Instructor" /></div>
            <div>Keys: <input type="text" data-bind="value: value.Keys" /></div>
            <div>Opponent Init: <input type="text" data-bind="value: value.OpponentInit" /></div>
            <div>Opponent Justification: <input type="text" data-bind="value: value.OpponentJustif" /></div>
            <div>Opponent Communication: <input type="text" data-bind="value: value.OpponentComm"/></div>
            <div>Hint: <input type="text" data-bind="value: Hint"/></div>
            <div>Opponent Incorrect Hint: <input type="text" data-bind="value: value.OpponentIncorrectHint"/></div>
            <div>Prompt: <input type="text" data-bind="value: Prompt" /></div>
            <div>PromptCompletion: <input type="text" data-bind="value: value.PromptCompletion"/></div>
            <div>Opponent Incorrect Prompt: <input type="text" data-bind="value: value.OpponentIncorrectPrompt"/></div>
        </div>
        </div>
        {{/each}}
    </script>

1 Ответ

1 голос
/ 11 августа 2011

Внутри вашего flawTemplate область действия равна caseStudy.selectedCase.Flaws, поэтому, когда вы ставите caseStudy.showFlawDetails, она не может быть найдена как свойство Flaws или глобально.

Таким образом, вы можете ссылаться на него с app.viewModel.caseStudy.showFlawDetails, если app имеет глобальную область видимости (что, похоже, работает для вас).

В противном случае, хороший вариант - передать функцию через templateOptions.Итак, вы должны сделать: 

data-bind='template: { name: "flawTemplate", data: caseStudy.selectedCase.Flaws, templateOptions: showFlawDetails: caseStudy.showFlawDetails } }'>

Затем вы получите к нему доступ, используя $item.showFlawDetails

Привязки click (и события) также ожидают, что вы передадите ему ссылку на функцию.В вашем случае вы передаете ему результат выполнения функции.Ответили об этом здесь: knockout.js вызывает щелчок, даже когда шаблон jquery отображается

...