Question

我有一个主页面，其中我已经引用了所有脚本，并且在体内我有一个duv容器，它有模板数据绑定，我的htm在那里被绑定。

问题是由Jquery控制的我的功能无法正常工作。对于例如日期选择器工作时，我把它放在主页中，其中引用了JavaScript，但在我的htm中没有工作，它们被绑定到模板。

所有库都正在正确加载，但是当我的jquery功能在模板内被调用时它不起作用。

e.g。主页：

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<script src="Scripts/foundation.min.js"></script>
<script src="Scripts/jquery.tablesorter.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/languageswitcher.js"></script>

<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                   
</div>
<!-- Initialize JS Plugins -->
<script src="Scripts/app.js"></script>

现在我的视图在运行时加载到主页面中。在我看来，我有一个日期选择器，它不起作用。当我把它放在主页面时它工作正常。

Answer 1

我认为这是因为您的jQuery代码在呈现模板之前运行。您可以使用模板绑定中提供的afterRender回调来启用datepicker。请查看documentation以获取更多信息和示例。

但实现这一目标的更好方法是创建自定义绑定。像这样：

ko.bindingHandlers.datepicker = {
    init: function(element){
        $(element).datepicker();
    },
    update: function(element) {
        $(element).datepicker('refresh');
    }
};

然后你可以通过这样做把文本输入到一个日期选择器：

<input type="text" data-bind="datepicker:true" />

详细了解自定义绑定here

knockout（模板绑定）：javascript（JQuery）函数不会从模板内部调用

1 个答案: