0

home.js ファイルに次のように記述しています。

 define(['services/logger'], function (logger) {
 var vm = {
    activate: activate,
    title: 'Home View'
 };

 return vm;

 //#region Internal Methods
 function activate() {
    logger.log('Home View Activated', null, 'home', true);
    return true;
 }
 //#endregion
 var editor, html = '';

 function createEditor() {
    if (editor)
        return;

    // Create a new editor inside the <div id="editor">, setting its value to html
    var config = {};
    editor = CKEDITOR.appendTo('editor', config, html);
 } 

 function removeEditor() {
    if (!editor)
        return;

    // Retrieve the editor contents. In an Ajax application, this data would be
    // sent to the server or used in any other way.
    document.getElementById('editorcontents').innerHTML = html = editor.getData();
    document.getElementById('contents').style.display = '';

    // Destroy the editor.
    editor.destroy();
    editor = null;
}
function MultiSelect() {
    ("#Sites").multiselect();
}
});

私の home.html ファイルには次のものが含まれています。

<section>
<h2 class="page-title" data-bind="text: title"></h2>
</section>
<section id ="Recipients">
 <article>
    <div class="row">
        <div class="span6">
        <label for="Study">Study: </label>
        <ul class="dropdown-menu" id="Study"></ul><br />
        <label for="Sites">Sites: </label>
        <ul class="dropdown-menu" data-bind="text: Sites" title="Sites" id="Sites" ></ul><br />
        <label for="Distribution">Distribution: </label>
        <input type="checkbox" data-bind="text: Distribution" title="Distribution" />
    </div><!-- span6 -->
    </div><!-- row -->
    <div class="row">
    <div class="span6">
        <label for="Recipients">Recipients: </label>
        <input type="checkbox" data-bind="text: Recipients" title="Recipients"/><br />
    </div><!-- span8 -->
    </div><!-- row -->
</article>
</section>

<section id ="Communication">
<article>
    <label for="SendFrom">Send From: </label>
    <label id="SendFrom"></label><br />
    <label for="Subject">Subject: </label>
    <input id="Subject" /><br />
    <div id="editor">

    </div>
</article>
</section>

Bootstrap クラスが、指定したレイアウトをレンダリングしていません。さらに、JQuery の複数選択と ckEditor もレンダリングされません。ソリューション ファイルに jquery、bootstrap などが含まれていることを再確認しました。JavaScript が正しくレンダリングされるようにするには、他にどのような変更が必要ですか?

4

2 に答える 2

1

他の関数が定義される前に、モジュール定義関数が返されているように見えます (return vm;)。

vm 作成ステートメントと return ステートメントを他の関数の下に移動すると、期待どおりの動作が見られるようになります。

ただし、Evan が DOM を操作するために viewAttached ライフサイクル関数を活用する必要があると述べたように、これはベスト プラクティスではありません。

于 2013-04-09T19:19:34.650 に答える
1

ビューモデルのアクティブなメソッドはおそらく durandal によって呼び出されていactivateますが、amd モジュールの残りの関数を呼び出すメソッドには何も表示されません。また、投稿したコードを見ると、巻き上げの問題が発生する可能性があると思います。

また、ビューで dom オブジェクトへの参照を取得しようとする場合は、関数内ではなくactivate関数内で do を使用する必要がありviewAttachedます。

activateビューモデルがビューにバインドされる前、およびDOMにアタッチされる前のライフサイクルで発生します。

viewAttachedは、viewmodel がビューにバインドされ、dom にアタッチされた後、ライフサイクルで発生します。

于 2013-04-08T23:08:42.707 に答える