将图像 src 绑定为 Knockout 中的表达式

Question

如果你觉得这个问题很愚蠢，请多多包涵。我是淘汰赛的初学者，正在努力学习。

我想将图像源绑定到表达式。表达式负责生成路径，并且该路径必须作为源应用到 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>

我正在使用以下数据绑定 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 );