Javascript 使用敲除绑定返回字符串

我正在尝试使用Knockout来使用一个无限滚动插件，我正在使用一个更好的插件，但是正在努力解决如何绑定它。不确定在当前形式下是否可能

滚动程序调用一个数据函数，该函数通过AJAX加载下一个数据块。然后，它调用一个工厂函数，将该数据转换为HTML，然后将HTML加载到容器中，并根据当前内容大小更新其内部状态

我一直认为它需要一个HTML字符串

我想做的是：

<div class="scroller" data-bind="infiniteScroll: { get: loadItems }">
    <div class="item">
        <p>
            <span data-bind="text:page"></span>
            <span class="info" data-bind="text"></span>
        </p>
    </div>
</div>

我的绑定，我完全被卡住了，是这样的-显然，目前只是硬编码响应-这是我需要用模板绑定替换的部分：

ko.bindingHandlers.infiniteScroll = {
    init: 
        function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) 
        {
            if($.fn.infiniteScroll)
            {
                // Get current value of supplied value
                var field = f_valueaccessor();
                var val = ko.unwrap(field);

                var options = {};

                if(typeof(val.get) == 'function')
                    options = val;
                else
                    options.get = val;

                options.elementFactory = options.elementFactory || 
                    function(contentdata, obj, config)
                    {
                        var s = '';

                        for(var i = 0; i < contentdata.length; i++)                         
                        {
                            var o = contentdata[i];

                            // NEED TO REPLACE THIS
                            s += '<div class="item"><p>Item ' + o.page + '.' + i + ' <span class="info">' + o.text + '</span></p></div>';
                        }

                        return s;
                    };

                $(el).infiniteScroll(options);

                return { controlsDescendantBindings: true };
            }
        }
};

ko.bindingHandlers.infiniteScroll={
初始化：
函数（el、f_valueaccessor、allbindings、viewmodel、bindingcontext）
{
如果（$.fn.infiniteScroll）
{
//获取所提供值的当前值
var字段=f_valueaccessor（）；
var val=ko.展开（字段）；
var选项={}；
if（typeof（val.get）=“函数”）
选项=val；
其他的
options.get=val；
options.elementFactory=options.elementFactory | |
函数（contentdata、obj、config）
{
var s=''；
对于（var i=0；i'；
}
返回s；
};
美元（el）；
返回{ControlsDescentBindings:true}；
}
}
};

contentdata

是一个对象数组，例如

[{page:1，text:'Item1'}，{page:1，text:'Item2'}…]

调用之间的页面大小可能不同；我无法知道这项服务会有什么回报；它不是一个传统的页面，更多地将其视为下一个数据块

因此，在元素工厂中，我希望以某种方式使用

.scroller

中的标记作为模板绑定contentdata数组，类似于foreach，然后将该标记返回到scroller插件

注意，我可以修改无限滚动条源代码，因此如果不能使用字符串，返回DOM元素也可以

我只是不知道如何a）将内容用作模板，b）将绑定结果返回到插件，以便它可以更新其状态

---

注意：我最终打算使用的页面当前在非平凡对象模型上使用

foreach

；因此，需要使用相同的标记；它需要一个很好的替代品。

我实际上已经找到了如何使用现有的滚动条来完成它，下面是一个问题：

基本上，您可以使用

applybindingstoode（doelement，bindings）

，它将KO绑定应用到节点集，而节点集不必连接到DOM

因此，我可以将绑定元素中的标记存储为模板，然后清空它，然后对于元素工厂，使用jQuery创建一个临时节点集，使用上述函数绑定它，然后返回HTML

诚然，使用纯KO滚动条进行重构可能会更好，但这意味着我可以继续使用经过测试和熟悉的插件，代码可能会帮助人们，因为这似乎是一个非常常见的问题主题

下面是绑定的新代码（标记如上所示）

ko.bindingHandlers.infiniteScroll={
初始化：
函数（el、f_valueaccessor、allbindings、viewmodel、bindingcontext）
{
如果（$.fn.infiniteScroll）
{
//获取所提供值的当前值
var字段=f_valueaccessor（）；
var val=ko.展开（字段）；
var选项={}；
if（typeof（val.get）=“函数”）
选项=val；
其他的
options.get=val；
var template=$（el.html（）；
options.elementFactory=options.elementFactory | |
函数（contentdata、obj、config）
{
//foreach需要一个根元素用作容器，因为它会在绑定时删除根元素。
var newnodes=$（''+模板+''）；
applybindingstoode（newnodes[0]，{foreach:contentdata}）；
返回newnodes.html（）；
};
$（el）
.empty（）
.无限滚动（选项）；
返回{ControlsDescentBindings:true}；
}
}
};

您是想专门推出自己的解决方案，还是只是想让它发挥作用？对于该项目，我愿意使用现有的KO infinite scroll插件，只要它可以通过AJAX加载每组新项目。就我个人而言，我想知道如何做到这一点；因此，虽然链接到现有的插件会很方便，作为一个实际的答案，我想知道如何做自己。也许这会有帮助？嗯，也许会。看起来不错。看起来我最好放弃现有的滚动代码，并基于该代码实现一个纯KO解决方案，我会尝试一下。好的，如果答案有帮助的话，一定要提高投票率

ko.bindingHandlers.infiniteScroll = {
    init: 
        function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) 
        {
            if($.fn.infiniteScroll)
            {
                // Get current value of supplied value
                var field = f_valueaccessor();
                var val = ko.unwrap(field);

                var options = {};

                if(typeof(val.get) == 'function')
                    options = val;
                else
                    options.get = val;

                var template = $(el).html();

                options.elementFactory = options.elementFactory || 
                    function(contentdata, obj, config)
                    {
                        // Need a root element for foreach to use as a container, as it removes the root element on binding.
                        var newnodes = $('<div>' + template + '</div>');

                        ko.applyBindingsToNode(newnodes[0], { foreach: contentdata });

                        return newnodes.html();                         
                    };

                $(el)
                    .empty()                
                    .infiniteScroll(options);

                return { controlsDescendantBindings: true };
            }
        }
};