jquery - 将图像 src 绑定(bind)为 Knockout 中的表达式

Question

如果您觉得这个问题很愚蠢，请耐心等待。我是 knockout 的初学者，正在努力学习它。

我想将图像源绑定(bind)到表达式。该表达式负责生成路径，并且该路径必须作为 img 的源应用。

<ul id='AllPatient' data-role='listview' data-inset='true' data-bind="foreach:Patients">
            @*<li><span data-bind="text: ko.toJSON($data)"></span></li>*@
            <li>
                <table class="Tabular">
                    <tr>
                        <td class="DataCell">
                            <a href="javascript:" id="pLocation" sortorder="none"><span data-bind="text:$data.UnitName">
                            </span></a>
                        </td>
                        <td class="DataCellImage">
                            <a href="javascript:" id="addPatient" sortorder="none" data-bind="click:$root.addPatient">
                                <img data-bind="attr:{src: $root.ImageSource}" src="~/Content/Images/MPL/PersonAdd.png" /></a>
                        </td>
                    </tr>
                </table>
            </li>
        </ul>

我正在使用以下数据绑定(bind) ViewModel:

function PatientsModel(data)
{
    var self = this;

    self.Patients = ko.observableArray([]);

    self.Patients(data.Patients);
    self.ImageSource = function (model)
    {
        if (model.myPatient == true)
        {
            return PyxisLinkJS.RootURL + '/Content/Images/MPL/MyPatientGray.png';
        }
        else if (model.localPatient == true)
        {
            return PyxisLinkJS.RootURL + '/Content/Images/MPL/PersonAdd.png';
        }
        else
        {
            return PyxisLinkJS.RootURL + '/Content/Images/MPL/MyPatientGray.png';
        }
    }
}

这就是发生的事情:它试图将 ImageSource 的函数体设置为 Image 的 src。我想触发ImageSource方法并将返回值设置为Image的Src。

问候， 苏米特

Answer 1

它返回函数而不是字符串，将其称为函数

<img data-bind="attr:{src: $root.ImageSource() }" src="~/Content/Images/MPL/PersonAdd.png" />

此外，您可以将这两者结合起来:

self.Patients = ko.observableArray([]);
self.Patients(data.Patients);

// Into this
self.Patients = ko.observableArray( data.Patients );