基于模板data-bind的Knockout自定义绑定实现问题

Got it, let's build this custom binding step by step. Here's how you can implement myBind to render each item in your observableArray using the specified template, with all the data-bind attributes in the template working correctly:

Step 1: Implement the Custom Binding Handler #

We'll use Knockout's built-in ko.bindingHandlers to define our myBind binding. The key here is leveraging Knockout's ko.renderTemplate method, which automatically handles activating the data-bind attributes in your template for each array item.

ko.bindingHandlers.myBind = {
    init: function(element, valueAccessor) {
        // Run initial render when the binding is first applied
        ko.bindingHandlers.myBind.update(element, valueAccessor);
        
        // Clean up subscriptions when the DOM element is disposed to prevent memory leaks
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            if (this.subscription) {
                this.subscription.dispose();
            }
        }.bind(this));
    },
    update: function(element, valueAccessor) {
        // Get the current value of the observableArray (works for non-observables too)
        const items = ko.unwrap(valueAccessor());
        
        // Clear existing elements from the container to avoid duplicates
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
        
        // Render each array item using the template and append to the container
        items.forEach(item => {
            ko.renderTemplate('my-template', { $data: item }, {}, element, 'append');
        });
    }
};

Step 2: Set Up Your View Model and HTML #

Your existing VM and HTML structure works perfectly with this binding. Here's the full setup including applying the bindings:

function VM() {
    this.data = ko.observableArray(['one', 'two']);
}

// Apply bindings to your view model
ko.applyBindings(new VM());

<div data-bind="myBind: data"></div>

<script id="my-template" type="text/html">
    <div data-bind="text: $data"></div>
</script>

How It Works #

• Initial Render: The init method triggers the first render of your array items when the binding is first attached to the DOM element.
• Reactivity: When your data observableArray changes (e.g., adding/removing items), Knockout automatically calls the update method to re-render the list with the latest items.
• Template Binding Activation: ko.renderTemplate takes care of applying the data-bind attributes in your template to each item, so the text: $data binding in your template will correctly display each array item's value without manual binding setup.

Bonus: Test Dynamic Updates #

To see the reactivity in action, add a button to push new items to the array:

<button data-bind="click: () => data.push('three')">Add "three"</button>

Clicking this button will automatically render a new <div> with the text "three" without any extra code.

内容的提问来源于stack exchange，提问作者KC Drez