Question

这是一款运行durandal的移动应用在我的html页面中，我有名字和图像。以下函数格式化我的页面：

define(function (){
function getAutors(myUrl) {
    $.ajax({
            type: "GET",
            url: myUrl,
            data: { numAuthors: 23 },
            dataType: "jsonp",
            success: processArray,
            error: function (xhr, status, err) {
                alert("Não conseguimos aceder aos dados");
            }


function processArray(arr) {
   var out = ""
    for (var i = 0; i < arr.length; i++) {
    out +='<div class="col-xs-12 text-center"> <a class="autor" style="color:black" id="' + arr[i].id + '" data-bind=" event  {click : btnClick}" ><h4>' +
        arr[i].name + '</h4></a></div>';
    } 
    $("#aqui").html(out)


}
return{
           activate: function(){},
           compositionComplete(){
               getAutors(this.myUrl);},
           btnClick: function(){
                  alert('You have clicked this');
           }
         };
    });
})

当我点击任何作者姓名时，我的btnClick功能不会激活谢谢你的时间！

Answer 1

您的btnClick永远不会被调用，因为您在绑定页面后创建HTML。您正在发出AJAX请求，如果此请求失败，它将调用您的 processArray 方法，然后它将在您的页面中创建DOM元素，但在这段时间内，Durandal已经运行 applyBindings ，这个带有数据绑定属性的新DOM将无效。当你使用Knockout时，你必须避免使用jQuery进行元素操作，你必须使用MVVM方式。

要做到这一点，你应该使用淘汰赛的开箱即用的模板引擎，并使用 foreach 数据绑定循环遍历你的observableArray，然后创建所需的html DOM，这里按照修改您的代码，使用foreach databind和observableArray：

define(function (){
    var vm = {
        authors: ko.observableArray(),
        getAutors: function (myUrl) {
            $.ajax({
                type: "GET",
                url: myUrl,
                data: { numAuthors: 23 },
                dataType: "jsonp",
                success: processArray,
                error: function (xhr, status, err) {
                    alert("Não conseguimos aceder aos dados");
                }
            });
        },
        processArray: function (arr) {
            this.authors(arr);
        },
        activate: function() { 
            getAutors(this.myUrl);  
        },
        btnClick: function(){
            alert('You have clicked this');
        }
    };

    return vm;
});

和HTML

<div id="aqui" data-bind="foreach: authors">
    <div class="col-xs-12 text-center">
        <a class="autor" style="color:black" data-bind="event {click: $root.btnClick}, attr: {id: id}" >
            <h4></h4>
        </a>
    </div>
</div>

无法访问durandal中的dom元素

1 个答案: