2013-03-27 3 views
1

Я добавляю класс в div через jQuery, и я хочу передать этот класс обратно в мой режим просмотра. Я искал ko.datafor(), и, похоже, я не делаю то, что хочу (или вполне возможно, что я просто не знаю, как правильно его использовать). Каков наилучший подход для этого?knockout.js - Сохранить класс для просмотраModel

EDIT - Позвольте мне объяснить некоторые больше:

Я работаю на Intergrating выбора цвета с нокаутом. Вы нажимаете на иконку выбора цвета, и я построить список цветов, чтобы выбрать из, как так:

for (var i = 1; i < self.SponsorFilters().length; i++) { 
         var filter = self.SponsorFilters()[i]; 
         if (filter.CssStyle() != null) { 
          $('.simplecolorpicker.picker').append('<div class="swatch' + i + '" role="button" tabindex="0">&nbsp;&nbsp;&nbsp;&nbsp;</div>'); 
          $(".simplecolorpicker.picker .selected").hide(); 

         } 
        } 

Затем, когда вы выбираете цвет вы хотите это отражается на иконку через "swatch+i". Мне нужен этот класс, который будет возвращен в мою модель viewModel.
Ух, просто набрав это, нет смысла. Возможно, мне придется переоценить мою стратегию.

+1

Почему вы хотите добавить класс в DIV с JQuery? Нокаут имеет привязку css, которая делает это за вас. – Spoike

+0

См. Правки выше:/ – ComatoseDuck

+1

Вы видели это? http://stackoverflow.com/questions/12399892/jquery-color-picker-binding-handler-creates-multiple-divs – Tyrsius

ответ

0

я в конечном итоге написание пользовательского связывания обработчика - Спасибо Tyrsius!

Нокаут

ko.bindingHandlers.colorPicker = { 
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       var value = valueAccessor(); 
       $(element).val(ko.utils.unwrapObservable(value)); 
       $(element).colorPicker(); 
       $(element).change(function() { 
        value(this.value); 
       }); 
      } 
     }; 

HTML

 <input class="jqColourPicker" type="text" data-bind="colorPicker: ColorCode, event: { change: $root.AdminSaveSponsorStyle }" /> 
1

Я пытаюсь написать свой нокаут без каких-либо селекторов jQuery. НИКТО. 0. Все (ну, большинство), которые вы делаете с jQuery, может быть выполнено с привязкой к нокауту или, по крайней мере, с пользовательской привязкой, которая абстрагирует материал jQuery из вашей модели viewmodel.

поэтому вместо того, чтобы вручную зацикливать на sponsorFilters, чтобы создать образец ниже, почему бы вам просто не использовать привязку foreach?

в вашем ViewModel

self.SponsorFiltersWithCSS = ko.computed(function() { 
    var sponsorFilters = self.SponsorFilters(); 
    var filteredFilters = [] 
    for(var i = 0;i<sponsorFilters.length;i++) { 
    if(sponsorFilters[i].CssStyle() != null) { 
     filteredFilters.push(sponsorFilters[i]); 
    } 
    } 
    return filteredFilters; 
}) 

Markup

<div class="swatches" data-bind="foreach:SponsorFiltersWithCSS"> 
    <div role="button" data-bind="attr:{'class':'swatch' + $index}">&nbsp;&nbsp;&nbsp;&nbsp;</div> 
</div> 
Смежные вопросы