0
У меня есть ужасная проблема с использованием konckout и плагина flexslider в моем приложении. Плагин flexlider загружает изображения в элементы li, но элементы li имеют встроенный стиль с альфой: 0, поэтому плагин загружается правильно, но я не вижу изображения, которые у него есть. Я пытаюсь использоватьплагин flexslider и проблема с нокаутом
$('.flexslider').removeData("flexslider");
, но не работает. Я пытаюсь сделать специальный обязательный обработчик, но did'nt работы:
ko.bindingHandlers.flexslideUI = {
init: function (element) {
$(element).flexslider();
},
update: function (element) {
$(element).flexslider('refresh');
}
};
Здесь я оставил некоторый объясняющую код надеясь кто-то может помочь мне с этой бедой:
// связывания обработчиков и
//update widgets function
ko.bindingHandlers.udpateWidgets = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
$('.flexslider').flexslider();
},
update: function (element, valueAccessor) {
$('.flexslider').flexslider();
$("a[data-rel^='tooltip']").tooltip();
$("a[data-rel^='tooltip']").attr("onclick", "javascript:return false;");
}
};
function myViewModel() {
var self = this;
self.myArray = ko.observableArray();
self.showRecommended = ko.observable(false);
self.showSpecial = ko.observable(false);
self.sortDirections = ko.observableArray([
{
name: "Sort By",
price: null,
rate: null
},
{
name: "Price Asc",
price: false,
rate: null
},
{
name: "Price Desc",
price: true,
rate: null
},
{
name: "Rate Asc",
price: null,
rate: false
},
{
name: "Rate Desc",
price: null,
rate: true
}]);
//sorting filtering function
self.currentSortDirection = ko.observable(self.sortDirections()[0]);
self.elementsToShow = ko.pureComputed(function() {
var recomend = self.showRecommended();
var special = self.showSpecial();
var sorting = self.currentSortDirection();
if (!recomend && !special) return self.myArray().sort(function (a, b) {
if (sorting.price != null) {
var fp = sorting.price ? -1 : 1;
ap = parseInt(a.price);
bp = parseInt(b.price);
return ap == bp ? 0 : (fp * (ap < bp ? -1 : 1));
}
else if (sorting.rate != null) {
var f = sorting.rate ? -1 : 1;
ar = parseFloat(a.rating);
br = parseFloat(b.rating);
return ar == br ? 0 : (f * (ar < br ? -1 : 1));
}
});
return ko.utils.arrayFilter(self.myArray(), function (element) {
return (element.recommended != "0" && recomend) || (element.offer != "" && special);
}).sort(function (a, b) {
debugger;
if (sorting.price != null) {
var fs = sorting.price ? -1 : 1;
ap = a.price;
bp = b.price;
return ap == bp ? 0 : (fs * (ap < bp ? -1 : 1));
}
if (sorting.rating != null) {
var fu = sorting.rate ? -1 : 1;
ar = a.rating;
br = b.rating;
return ar == br ? 0 : (fu * (ar < br ? -1 : 1));
}
});
}, self);
self.loadUI = function(){
$('.flexslider').flexslider();
//reload tooltip and disable onclic event
$("a[data-rel^='tooltip']").tooltip();
$("a[data-rel^='tooltip']").attr("onclick", "javascript:return false;")
}
self.Search = function() {
$.ajax({
type: "POST",
url: "mydomain/Find",
data: "searchExpressionString:exp",
contentType: "application/json; charset=utf-8",
cache: false,
success: function (result) {
var response = $.parseJSON(result);
self.myArray(response.array);
// window.location.search +='&'+searchExp;
self.loadUI();
},
error: function(a, desc, error) {
// window.location.search +='&'+searchExp;
}
// self.loadUI();
},
});
}
//end viewModel
$(function(){
var model = new myViewModel();
ko.applyBindings(model);
});
</script>
<!-- search button, loads content -->
<button data-bind='click:Search' id="searchbutton">search</button>
<!--sorting elements -->
<div class="sortbuttons" style="text-align: left;">
<ul>
<li>
<strong>SHOW ONLY: </strong>
</li>
<li>
<label><input type='checkbox' name="rock" data-bind='checked: showRecommended' />Recommended</label>
</li>
<li>
<label><input type='checkbox' name="gas" data-bind='checked: showSpecial' />Special Offer</label>
</li>
</ul>
</div>
<select data-bind="options: sortDirections, optionsText: 'name', value: currentSortDirection"></select>
<!-- part of the page that I bind the slider -->
<div data-bind='foreach: elementsToShow'>
<div class="post-thumb-wrap span5" data-bind="udpateWidgets:true">
<div class="flexslider" id="slider">
<a data-bind="attr: { 'href': $data.pageUrl }" target="_blank">
<ul class="slides" data-bind='foreach: imagePaths'>
<li>
<img data-bind="attr: { 'src': $data.srcImg, 'alt': $data.keywords }" itemprop="image" />
</li>
</ul>
</a>
</div>
<div class="shortl-btn">
<a class="button button-darkgray" data-bind="attr : {'href': $data.pageUrl}">
<i class="icon-signin"></i>More Details
</a>
</div>
</div>
</div>
//my array data have this structure, I put it in myArray using $.parseJSON of a response using ajax
{
'array': [
{
'rating': '5',
'imagePaths':[
{
'srcImg': 'fun.jpg',
'keywords': '1234'
},
{
'srcImg': 'sun.jpg',
'keywords': '1234'
},
{
'srcImg': 'pape.jpg',
'keywords': '212'
}
],
'price': '43',
'offer': '',
'recommended': '0',
},
{
'rating': '3',
'imagePaths':[
{
'srcImg': 'fun.jpg',
'keywords': '1234'
},
{
'srcImg': 'sun.jpg',
'keywords': '1234'
},
{
'srcImg': 'pape.jpg',
'keywords': '212'
}
],
'price': '143',
'offer': '12',
'recommended': '1',
},
{
'rating': '2',
'imagePaths':[
{
'srcImg': 'fun.jpg',
'keywords': '1234'
},
{
'srcImg': 'sun.jpg',
'keywords': '1234'
},
{
'srcImg': 'pape.jpg',
'keywords': '212'
}
],
'price': '443',
'offer': '34',
'recommended': '0',
},
{
'rating': '3.8',
'imagePaths':[
{
'srcImg': 'fun.jpg',
'keywords': '1234'
},
{
'srcImg': 'sun.jpg',
'keywords': '1234'
},
{
'srcImg': 'pape.jpg',
'keywords': '212'
}
],
'price': '843',
'offer': '23',
'recommended': '1',
},
{
'rating': '4',
'imagePaths':[
{
'srcImg': 'fun.jpg',
'keywords': '1234'
},
{
'srcImg': 'sun.jpg',
'keywords': '1234'
},
{
'srcImg': 'pape.jpg',
'keywords': '212'
}
],
'price': '233',
'offer': '',
'recommended': '0',
}
]
}
Спасибо за совет @Artjon B. Ответ добавлено. – ArlanG