光滑 js 的敲除自定义绑定不起作用
knockout custom binding for slick js not working
我没有敲除绑定的工作代码是:
<div class="slick_demo_1">
<div>
<div class="ibox-content">
<h2>Slide 1</h2>
</div>
</div>
<div>
<div class="ibox-content">
<h2>Slide 2</h2>
</div>
</div>
<div>
<div class="ibox-content">
<h2>Slide 3</h2>
</div>
</div>
</div>
为了初始化 slick,我的 js 代码是:
$('.slick_demo_1').slick({
dots: true
});
上面的代码运行良好。
现在带有敲除绑定的代码是:
<div class="slick_demo_1" data-bind="foreach:showSlider">
<div>
<div class="ibox-content">
<h2 data-bind="slider"></h2>
</div>
</div>
</div>
要将 slick 与 DOM 绑定,我的代码是:
ko.bindingHandlers.slick = {
init: function (element, valueAccessor) {
$(element).slick({
dots: true
});
}
};
但是自定义绑定不起作用。我做错了什么?
您显示的代码与自定义活页夹的正确实现几乎没有相似之处。
几个提示:
- 您应该在根元素中使用自定义绑定
- 自定义绑定应该负责构建,如果可能的话,如果元素被处置,则从元素中移除轮播 API(使用 slick 的
destroy
或 unslick
)来自 ko
- 自定义活页夹应该能够更新轮播中的元素
- 使用额外的
slickOptions
绑定将额外的对象传递给 slick 初始化会很有趣
自定义绑定的基本结构is explained here。查看代码模板:
ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever any observables/computeds that are accessed change
// Update the DOM element based on the supplied values here.
}
};
解释过,init
负责初始化轮播,update
负责在数组变化时更新轮播的内容。 R P Niemeyer 在此处对自定义绑定进行了深入解释:Another Look at Custom Bindings for KnockoutJS.
如果您正确实施,您的 HTML 代码应该如下所示:
<div data-bind="slick: imagesArray, slickOptions: additionalOptions>
</div>
在 init
上,您的自定义绑定应基于 imagesArray
创建元素,并调用 slick 初始化,使用 additionalOptions
(如果存在),并注册 slick 销毁当元素被 ko 处理时。在更新中,您应该修改内部元素并可能重新应用 slick。您还应该查看 slick's API.
This fiddle 显示了部分实现,但比当前的流式代码段更完整:
var imageUrls = [];
var i = 1;
for (i=1;i<=10;i++)
imageUrls.push('http://lorempixel.com/400/200/animals/'+i);
ko.bindingHandlers.slick = {
init: function(element, valueAccessor, allBindingsAccessor) {
// Clears the div
$(element).empty();
// Creates the inner divs with images
var images = ko.unwrap(valueAccessor());
if (images) {
images.forEach(function(imgUrl) {
$div = $('<div>');
$image = $('<img>');
$image.attr('src',imgUrl);
$div.append($image);
$(element).append($div)
});
}
// try to recover slickOptions
var options = allBindingsAccessor().slickOptions || {};
// Initialize slick on the div, with provided options
$(element).slick(options);
//handle disposal, if KO removes the element
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).slick('unslick');
});
},
//update the control when the view model changes
update: function(element, valueAccessor) {
var images = ko.unwrap(valueAccessor());
// Do something to update the content
}
};
var vm = {
images: ko.observableArray(imageUrls),
options: {}
}
ko.applyBindings(vm, gallery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css" rel="stylesheet">
<div id="gallery"
style="width:400px"
data-bind="slick: images, slickOptions: {dots:true, initialSlide:4}">
</div>
实现中缺少的部分是在 imgUrls 更改时更新图库。但它在提示中显示了主要技术。
我没有敲除绑定的工作代码是:
<div class="slick_demo_1">
<div>
<div class="ibox-content">
<h2>Slide 1</h2>
</div>
</div>
<div>
<div class="ibox-content">
<h2>Slide 2</h2>
</div>
</div>
<div>
<div class="ibox-content">
<h2>Slide 3</h2>
</div>
</div>
</div>
为了初始化 slick,我的 js 代码是:
$('.slick_demo_1').slick({
dots: true
});
上面的代码运行良好。 现在带有敲除绑定的代码是:
<div class="slick_demo_1" data-bind="foreach:showSlider">
<div>
<div class="ibox-content">
<h2 data-bind="slider"></h2>
</div>
</div>
</div>
要将 slick 与 DOM 绑定,我的代码是:
ko.bindingHandlers.slick = {
init: function (element, valueAccessor) {
$(element).slick({
dots: true
});
}
};
但是自定义绑定不起作用。我做错了什么?
您显示的代码与自定义活页夹的正确实现几乎没有相似之处。
几个提示:
- 您应该在根元素中使用自定义绑定
- 自定义绑定应该负责构建,如果可能的话,如果元素被处置,则从元素中移除轮播 API(使用 slick 的
destroy
或unslick
)来自 ko - 自定义活页夹应该能够更新轮播中的元素
- 使用额外的
slickOptions
绑定将额外的对象传递给 slick 初始化会很有趣
自定义绑定的基本结构is explained here。查看代码模板:
ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever any observables/computeds that are accessed change
// Update the DOM element based on the supplied values here.
}
};
解释过,init
负责初始化轮播,update
负责在数组变化时更新轮播的内容。 R P Niemeyer 在此处对自定义绑定进行了深入解释:Another Look at Custom Bindings for KnockoutJS.
如果您正确实施,您的 HTML 代码应该如下所示:
<div data-bind="slick: imagesArray, slickOptions: additionalOptions>
</div>
在 init
上,您的自定义绑定应基于 imagesArray
创建元素,并调用 slick 初始化,使用 additionalOptions
(如果存在),并注册 slick 销毁当元素被 ko 处理时。在更新中,您应该修改内部元素并可能重新应用 slick。您还应该查看 slick's API.
This fiddle 显示了部分实现,但比当前的流式代码段更完整:
var imageUrls = [];
var i = 1;
for (i=1;i<=10;i++)
imageUrls.push('http://lorempixel.com/400/200/animals/'+i);
ko.bindingHandlers.slick = {
init: function(element, valueAccessor, allBindingsAccessor) {
// Clears the div
$(element).empty();
// Creates the inner divs with images
var images = ko.unwrap(valueAccessor());
if (images) {
images.forEach(function(imgUrl) {
$div = $('<div>');
$image = $('<img>');
$image.attr('src',imgUrl);
$div.append($image);
$(element).append($div)
});
}
// try to recover slickOptions
var options = allBindingsAccessor().slickOptions || {};
// Initialize slick on the div, with provided options
$(element).slick(options);
//handle disposal, if KO removes the element
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).slick('unslick');
});
},
//update the control when the view model changes
update: function(element, valueAccessor) {
var images = ko.unwrap(valueAccessor());
// Do something to update the content
}
};
var vm = {
images: ko.observableArray(imageUrls),
options: {}
}
ko.applyBindings(vm, gallery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css" rel="stylesheet">
<div id="gallery"
style="width:400px"
data-bind="slick: images, slickOptions: {dots:true, initialSlide:4}">
</div>
实现中缺少的部分是在 imgUrls 更改时更新图库。但它在提示中显示了主要技术。