Question

我试图在attr src上调用一个函数但是失败了。这是我尝试过的。

function FavoriteViewModel() {
    var self = this

    self.FavoriteProfiles   =   ko.observableArray([])

    self.getRating  =   function(Rating){
        //here i want conditions and concat image path
        return does nothing here
    }

    self.LoadData   =   function(){
        //run ajax and put its result in self.FavoriteProfiles
        self.FavoriteProfiles(Result)
    }   

    self.LoadData()
}

当我运行ajax时，会带来这个结果。结果是多个我只发布单个对象来理解

ProfileId   20
Age         21
Gender      "F"
Rating      4

和im绑定这样的数据

<div id="favorite-related-profiles" data-bind="foreach:FavoriteProfiles">
<article class="prfl_box">
    <p>
        <span id="favorite-related-age" data-bind="text:Age"></span>               
        <span id="favorite-related-gender" data-bind="text:Gender"></span>               
        <br>
        <img id="favorite-related-rating" class="pro_rating" src="" data-bind="attr:{src:Rating}">
    </p>
</article>
</div>

当我尝试这样的绑定时

<img id="favorite-related-rating" class="pro_rating" src="" data-bind="attr:{src:$root.getRating.bind($data,Rating)}">

我在src

中得到了这个

src="function () { [native code] }"

如何动态生成src属性注意我需要显示图像。图像命名为4rating.png，5rating.png，default.png。我想检查在src属性中评级是否为4分配4rating。我怎样才能做到这一点。

Answer 1

好的，他们很少有办法做到这一点。现在，如果我理解了您的问题，那么您需要将src属性设置为4rating.png，5rating.png等等，具体取决于评级值为4,5。

如果是这种情况，请查看此DEMO - A dirty way

现在，让我们根据您的代码使其运行： -

您可以查看DEMO2- Proper way。如果你检查元素并看到yopu，我将找到如下的HTML标记： -

<td data-bind="attr:{src: $root.getRating($data)}" src="4rating.png">
            </td>

希望它有所帮助。

编辑： -

只是一个建议，当你使用Knockout Model＆＃39;然后你可以保持你的Model Seperate。让您的流程简单，它将更加可扩展。我将分享如何使用揭示模块模式 DEMO 学习使用挖空进行编码。

创建您的视图模型，如下所示： -

function FavoriteViewModel(data) {
    var self = this

    self.ProfileId = data.ProfileId;//Do some exception handling
    self.Age = data.Age;//Do some exception handling
    self.Gender = data.Gender;//Do some exception handling
    self.Rating = data.Rating;//Do some exception handling
    self.RatingExtended = data.Rating + "rating.png"; //Some random stuff

}

创建一个包含收藏夹数组的变量，并且data-bind为HTML。

var FavoriteProfiles = ko.observableArray([]);

最后，AJAX调用获取数据并将其分配给FavoriteProfiles。

var ajaxdata = DummyAjaxCall(); //get all profiles

        $.each(ajaxdata, function (index, value) {
            FavoriteProfiles.push(new FavoriteViewModel(value)); //Create a Model
        });

Answer 2

将您的数据绑定更改为：

data-bind="attr:{src:$root.getRating.bind($data,Rating)}"

所有改变的是我从函数调用中获取了''，因为通过这样做，你实际上是将src设置为函数作为字符串。

编辑：尝试删除函数

上的绑定

data-bind="attr:{src:$root.getRating($data,Rating)}"

在knockout.js中动态调用ontr src上的child上的函数

2 个答案: