在我的应用程序中使用konckout和flexslider插件时遇到了一个可怕的问题。 flexlider插件加载li元素上的图像，但li元素有一个带有alpha：0的内联窗框，因此插件正确加载但我无法看到它拥有的图像。 我尝试使用
$('.flexslider').removeData("flexslider");
但没有奏效。我尝试制作一个特殊的绑定处理程序但是没有工作：
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',
}
]
}
答案 0 :(得分：-1)
我最后使用了一个模板绑定，它重新渲染模板每个群体上的元素，避免使用foreach并在其中重新渲染补充插件。
模板绑定使用呈现模板的结果填充关联的DOM元素。模板是一种简单方便的方法，可以根据视图模型数据构建复杂的UI结构（可能包含重复或嵌套的块）。
使用模板有两种主要方式：
本机模板是支持foreach，if，with和其他控制流绑定的机制。在内部，这些控制流绑定捕获元素中包含的HTML标记，并将其用作模板来呈现任意数据项。此功能内置于Knockout中，不需要任何外部库。
基于字符串的模板是一种将Knockout连接到第三方模板引擎的方法。 Knockout会将模型值传递给外部模板引擎，并将生成的标记字符串注入到文档中。有关使用jquery.tmpl和Underscore模板引擎的示例，请参阅下文。
所以，我用
<div data-bind="template: { name: 'my-template', foreach: myArray(), afterRender: resetrUI }">
我在myViewModel上使用此功能
resetrUI = function (elements) {
$('.flexslider').flexslider();
}