2013-10-09 3 views
0

Я новичок в Требовании также в Нокауте. Теперь я пытаюсь интегрировать свою модель нокаута в архитектуру Reuire.js.Применить привязки нокаута в определенном контексте

У меня есть 5 JS файлы:

  • /scripts/require.js
  • /scripts/jquery-2.0.3.js
  • /scripts/knockout-2.2.0.js
  • /scripts/app.js
  • /scripts/ko-model/MyViewModel.js

Это, как я называю require.js из индекса. HTML:

<script data-main="/scripts/app" src="/scripts/require.js"></script> 

А вот точка входа скрипт app.js:

require.config({ 
    baseUrl: "/scripts", 
    paths: { 
     "jquery": "jquery-2.0.3", 
     "knockout": "knockout-2.2.0", 
     "MyViewModel": "./ko-model/MyViewModel" 
    } 
}); 

require([ 
    "jquery", 
    "knockout", 
    "MyViewModel" 
], 
    function ($, ko, MyViewModel) { 
     // LOGIC: 
     $(function() { 
      ko.applyBindings(
       new MyViewModel(), 
       $("#myId") 
      ); 
     });   
    }); 

Вот MyViewModel.js модуль:

define(
    'MyViewModel', 
    ["knockout"], 
    function (ko) { 
     return function MyViewModel() { 
      // MyViewModel implementation 
      ... 
     }; 
    }); 

Это отлично работает для меня. Но.

Как вы можете видеть в app.js у меня есть:

function ($, ko, MyViewModel) { 
    // LOGIC: 
    $(function() { 
     ko.applyBindings(
      new MyViewModel(), 
      $("#myId") 
     ); 
    }); 
} 

И мне не нравится это. Я предпочел бы не использовать JQuery здесь и указать контекст нокаутирующий как-то так:

function ($, ko, MyViewModel) { 
    // LOGIC: 
    ko.applyBindings(
     new MyViewModel(), 
     document.getElementById("myId") 
    ); 
} 

Но в этом случае нокаут привязок просто не работает. Кажется, что document.getElementById ("myId") не работает здесь. И я не знаю, почему. (Мое лучшее предположение заключалось в том, что документ еще не загружен при вызове ko.applyBindings()).

Поэтому у меня есть следующий вопрос:

Как я могу избежать с помощью JQuery в разделе LOGIC, но все-таки указать контекст нокаута?

Я буду благодарен за любые предложения по улучшению моего кода.

ответ

1

Да, он не может найти идентификатор, потому что, скорее всего, документ еще не закончил загрузку. Эта проблема, скорее всего, возникнет, если <script> s находятся в <head>. Требуемое решение - это domReady plugin. Из документов:

require(["jquery", "knockout", "MyViewModel", "domReady"], 
function($, ko, MyViewModel, domReady) { 
    domReady(function() { 
     // your code here, document is initialized 
    }); 
}); 
Смежные вопросы