Tôi có một tình huống kỳ quặc. Về cơ bản, tôi có hai liên kết tùy chỉnh được sử dụng để tạo hoạt ảnh cho phần tử DOM thành giá trị mới. Đây là aWidth và aRight, tương ứng với các giá trị độ rộng và đúng tương ứng.Tại sao ràng buộc tùy chỉnh KnockoutJS của tôi được kích hoạt?
tôi đã thực hiện các cam kết ràng buộc như thế này:
<div class='classname' data-bind="aRight: right, aWidth: containerWidth, style: { zIndex: zindex, left: (left() + 'px'), height: (containerHeight() + 'px') }">
... và các ràng buộc tùy chỉnh giống như thế này:
ko.bindingHandlers.aWidth =
{
update: function (element, valueAccessor, allBindingsAccessor, context)
{
// Get the value accessor
var value = valueAccessor();
// Get the new width and the duration of the animation
var newWidth = ko.utils.unwrapObservable(value);
var duration = 500;
$(element).animate({ width: newWidth }, duration, "swing");
}
};
ko.bindingHandlers.aRight =
{
update: function (element, valueAccessor, allBindingsAccessor, context)
{
// Get the value accessor
var value = valueAccessor();
// Get the new width and the duration of the animation
var newRight = ko.utils.unwrapObservable(value);
var duration = 500;
$(element).animate({ right: newRight }, duration, "swing");
console.log("aRight Called: newRight - " + newRight + ", duration - " + duration);
}
};
Vì vậy, vấn đề xuất phát xung quanh khi chúng ta thay đổi một quan sát khác hơn hai quan sát ràng buộc tùy chỉnh của tôi, ví dụ zindex.
Nếu chúng ta thay đổi ZIndex thể quan sát được, giá trị được cập nhật một cách chính xác trong DOM, nhưng đối với một số lý do, xét đúng tôi cũng ràng buộc được kích hoạt! ...
tôi không có bất kỳ tham chiếu đến nó trong tôi aRight tùy chỉnh ràng buộc do đó chắc chắn không thể là một phụ thuộc?
Ràng buộc aRight của tôi cũng được kích hoạt khi liên kết aWidth của tôi được kích hoạt quá, cũng hơi lạ!
Có ai có bất kỳ ý tưởng nào về điều này không?
Cảm ơn rất nhiều!
Andy.
Cập nhật
Đây là một phần của mô hình xem mà cập nhật các chỉ số, mà khi làm xét đúng ràng buộc để lửa tùy chỉnh của tôi (điều này là rất nhiều psudo mã bằng cách này!):
var page = function()
{
this.zindex = ko.observable(0);
this.right = ko.observable(0);
// and other observables....
}
var viewModel = function()
{
var pages = ko.oberservableArray();
// populate the pages array etc...
this.someMethod = function()
{
// Do some stuff...
this.anotherMethod();
// Do some other stuff
}
.bind(this);
this.anotherMethod() = function
{
var pageCount = this.pages().length;
for (var pageNum = 0; pageNum < pageCount; pageNum++)
{
var page = this.pages()[pageNum];
page.zindex(/* a different value */); // This is what causes my aRight binding to fire...
}
}
.bind(this);
}
cập nhật
tôi chỉ đọc một bài đăng ở đây: http://groups.google.com/group/knockoutjs/browse_thread/thread/26a3157ae68c7aa5/44c96d1b748f63bb?lnk=gst&q=custom+binding+firing#44c96d1b748f63bb
nói:
Bên cạnh đó, một ràng buộc sẽ có chức năng cập nhật của nó chạy một lần nữa, nếu khác ràng buộc trong các thuộc tính cùng một dữ liệu ràng buộc được kích hoạt là tốt.
Điều này có nghĩa là những gì tôi thấy là ràng buộc tùy chỉnh của tôi đang được kích hoạt khi bất kỳ ràng buộc nào khác trong thuộc tính ràng buộc dữ liệu được kích hoạt (nó chỉ xảy ra có thể là zindex là lần đầu tiên tôi thấy thay đổi) ? Đây có phải là không một chút lẻ/sai? ...
Cập nhật
Tôi đã có một fiddle đơn giản mà tôi nghĩ khá nhiều tổng kết vấn đề của tôi. Nó có vẻ như bất kỳ ràng buộc trên cùng một thuộc tính ràng buộc dữ liệu như nhiều ràng buộc tùy chỉnh sẽ làm cho nó cập nhật!
Hmmm ... đoán tôi sẽ phải làm việc xung quanh nó bằng cách thủ công kiểm tra trong tùy chỉnh của tôi ràng buộc về việc liệu giá trị đã thực sự thay đổi hay không !!Điều này không đánh bại điểm thực sự của một ràng buộc?
Tôi cũng đã đăng một câu hỏi chính xác hơn trên các diễn đàn Knockout: http://groups.google.com/group/knockoutjs/browse_thread/thread/d2290d96e33f1d5a
Tôi tự hỏi nếu nó là cái gì để làm với $ (element) .animate()? Điều gì xảy ra nếu thay vì làm động, bạn chỉ cần thay đổi chiều rộng/chiều cao một cách trực tiếp? –
Câu hỏi hay ... hãy cho tôi một giây ... :) – Andy
@ Alex Key, nah, sử dụng $ (phần tử) .css ("right", newRight + "px"); không giúp đỡ ít nhất. Vẫn đang được kích hoạt khi chỉ mục được cập nhật! Nhờ đề nghị mặc dù! – Andy