使用 KnockoutJS 中的自定义绑定更改绑定值

发布于 2024-12-21 16:58:36 字数 538 浏览 2 评论 0原文

我有一个自定义绑定，用于截断可观察数组中的描述。我只是想知道更改返回到绑定的文本的最佳方法。

    ko.bindingHandlers.summarize = { 
        init: function(element, valueAccessor, allBindingsAccessor, context) {
            var pattern = new RegExp(/^[^.]+/);
            var summarized = pattern.exec(context.description());
            //How do I set the text to the summarized value?
        }
    }

页面其他地方使用了广泛的描述。这个截断的版本用在侧边栏中。愿意接受有关更好方法的建议，但这对我来说似乎是最好的方法。

viewModel 是通过映射插件从 JSON 文件生成的，或者我只是直接在 viewmodel 中添加截断的版本。

谢谢你看东西。

原文

I have a custom binding I am using to truncate a description in an observable array. I am just wondering the best way to go about changing the text that is returned to the binding.

    ko.bindingHandlers.summarize = { 
        init: function(element, valueAccessor, allBindingsAccessor, context) {
            var pattern = new RegExp(/^[^.]+/);
            var summarized = pattern.exec(context.description());
            //How do I set the text to the summarized value?
        }
    }

The broad description is used elsewhere on the page. This truncated version is used in the sidebar. Open to suggestions about a better way to go about this but this seemed like the best way to me.

The viewModel is generated from a JSON file via the mapping plugin or I would just add in a truncated version directly in the viewmodel.

Thanks for taking a look at things.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不及他 2024-12-28 16:58:36

这就是我所做的。当我查看淘汰库的来源时，事情很简单。我强烈建议深入研究库代码。这对于学习来说是无价的。

ko.bindingHandlers.summarize = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) {
    var pattern = new RegExp(/^[^.]+/);
    var summarized = pattern.exec(context.description());
    typeof element.innerText == "string" ? element.innerText = summarized
                                         : element.textContent = summarized;
    }
}

要在模板中使用它，您只需：

<p data-bind='summarize: description'></p>

其中描述是可观察的。

Here is what I did. It was simple once I looked at the source of the knockout Library. I would highly recommend digging around in the library code. It is invaluable for learning.

ko.bindingHandlers.summarize = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) {
    var pattern = new RegExp(/^[^.]+/);
    var summarized = pattern.exec(context.description());
    typeof element.innerText == "string" ? element.innerText = summarized
                                         : element.textContent = summarized;
    }
}

To use it in a template you would simply:

<p data-bind='summarize: description'></p>

Where description would be an observable.

回复收藏 0 原文

月下客 2024-12-28 16:58:36

在您的示例中，您将自定义绑定与绑定语句 data-bind='summarize: description' 中的描述相关联，因此您可以使用 valueAccessor 参数获得更大的效果。灵活性。

我更进一步，使用了 ko.unwrap 函数，这样您的自定义绑定也可以处理不可观察的值：

ko.bindingHandlers.summarize = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) {
    var pattern = new RegExp(/^[^.]+/);
    var summarized = pattern.exec(ko.unwrap( valueAccessor() ) );
    typeof element.innerText == "string" ? element.innerText = summarized
                                         : element.textContent = summarized;
    }
}

In your example, you are associating your custom binding with the description in your binding statement data-bind='summarize: description', so you can use the valueAccessor parameter for greater flexibility.

I went a step further and used the ko.unwrap function so your custom binding can handle non-observable values as well:

ko.bindingHandlers.summarize = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) {
    var pattern = new RegExp(/^[^.]+/);
    var summarized = pattern.exec(ko.unwrap( valueAccessor() ) );
    typeof element.innerText == "string" ? element.innerText = summarized
                                         : element.textContent = summarized;
    }
}

回复收藏 0 原文

~没有更多了~