связывания с данными области видимости внутри JQuery готовности(), но за пределы модели нокаута

Question

Я пытаюсь связать select элементов с моей точкой зрения, используя массивы с произвольными данными, которые определены вне моей модели, но внутриready() функции JQuery в:

<select data-bind='options: itemsList,          
        value: selectedItem'> 
</select> 


$(document).ready(function($) { 
    var itemsList = ["one", "two", "three"]; 

    function ViewModel() { 
     var self = this;  
     self.selectedItem = ko.observable(); 
    }; 
    ko.applyBindings(new ViewModel()); 
}); 

Это не работает, так как itemsList является областью действия вне модели, но внутри ready(), что делает его недоступным для отображения вида select элемента.

Я мог бы сделать itemsList части модели, используя наблюдаемый массив ...

function ViewModel() { 
    var self = this;  
    self.itemsList = ko.observableArray(itemsList); 
    self.selectedItem = ko.observable(); 
}; 

..этоты работает, но заставляет меня переопределить toJSON() для каждого объекта, чтобы подавить сериализацию всех наблюдаемых массивов, не являющуюся часть желаемый выход json.

Другой вариант заключается в добавлении всех массивов в глобальном масштабе:

<script> 
    var itemsList = ["one", "two", "three"]; 
    var anotherList = ... 
    </script> 

..выполняется рискованно, и, честно говоря, это дает мне ульев; Я не предпочитаю этого; Я предполагаю, что есть лучшая альтернатива?

я рассмотрел связывающий контекст KNOCKOUT в documentation, и на основе моего понимания, ни $root или $parent не может получить доступ сферы за пределами корневой модели.

Answer 1

Поместите все, что вы хотите сериализовать, в подмодуль и вызовите toJSON() на нем вместо корневой модели. Затем вы можете поместить itemsList в корневую модель и получить доступ к ней из привязок.

Answer 2

Я не знаю, о KO, но я думаю, что это должно работать:

<select data-bind='options: KoRepos.itemsList,          
        value: selectedItem'> 
</select> 


var KoRepos = {}; //Container for 'global' data repositories 

$(document).ready(function($) { 
    KoRepos.itemsList = ["one", "two", "three"]; 

    function ViewModel() { 
     var self = this;  
     self.selectedItem = ko.observable(); 
    }; 
    ko.applyBindings(new ViewModel()); 
}); 

Таким образом, вы не загрязнять глобальное пространство имен, добавляется только один новый вар (KoRepos).

Надеюсь, это поможет