Question

尝试绑定到td时，第一个$root.rootBaseUrl列中的链接会显示出来。

在第二个td列中，相同的rootBaseUrl观察值可以完美打印。

区别在于，在第一个td列中，我尝试将值设置为attr:。

另请注意，foreach级别发生tbody次循环。因此使用$root前缀。

    <tbody data-bind="foreach: siteList">        
        <tr>
            <td><h3><a data-bind="text: SiteName, attr: {href: $root.rootBaseUrl + SiteID}"></a></h3></td>                
            <td><h3><span data-bind="text: $root.rootBaseUrl"></span></h3></td>
        </tr>
    </tbody>

var rootBaseUrl = ko.observable("");
var index = window.location.toString().indexOf("RiskOrder");
var baseURL = window.location.toString().substring(0, index);               
this.rootBaseUrl(baseURL);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

基本上，我在JS中获取当前浏览器URL，将其剥离到基本根URL，然后尝试将此静态URL添加到href绑定并与动态SiteID值连接。

这可能吗？

Answer 1

将attr替换为text，并瞥见您的问题：

function Vm(){
  var self = this;
  self.SiteID = ko.observable("AX123");
}

function RootVm(){
  var self = this;
  var index = window.location.toString().indexOf("RiskOrder");
  var baseURL = window.location.toString().substring(0, index);
  
  self.rootBaseUrl = ko.observable("");
  self.SiteName = ko.observable("My Site");
  self.rootBaseUrl(baseURL);
  self.SiteList = ko.observableArray([new Vm()]);
}

ko.applyBindings(new RootVm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table>
  <tbody data-bind="foreach: SiteList">
  <tr>
    <td>
      <h3><a data-bind="text: $root.rootBaseUrl + SiteID"></a></h3>
    </td>
    <td>
      <h3><span data-bind="text: $root.rootBaseUrl"></span></h3>
    </td>
  </tr>
  </tbody>
</table>

它呈现function.....，因此是函数的文本表示。这是因为rootBaseUrl是一个函数。如果要在表达式中使用它，则使用括号：

<h3><a data-bind="text: $root.rootBaseUrl()+ SiteID()"></a></h3>

如果您在绑定中将其用作仅事物，则括号可选：

<h3><span data-bind="text: $root.rootBaseUrl()"></span></h3>

所以你的解决方案是：

function Vm(){
  var self = this;
  self.SiteID = ko.observable("AX123");
  self.SiteName = ko.observable("My Site");
}

function RootVm(){
  var self = this;
  var index = window.location.toString().indexOf("RiskOrder");
  var baseURL = window.location.toString().substring(0, index);
  
  // On SO Snippets window.location works differently so we hack it:
  baseURL = "https://example.com/my-website/url/";
  
  self.rootBaseUrl = ko.observable("");
  self.rootBaseUrl(baseURL);
  self.SiteList = ko.observableArray([new Vm()]);
}

ko.applyBindings(new RootVm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table>
  <tbody data-bind="foreach: SiteList">
  <tr>
    <td>
      <h3><a data-bind="text: SiteName, attr: { href: $root.rootBaseUrl() + SiteID() }"></a></h3>
    </td>
    <td>
      Second column
    </td>
  </tr>
  </tbody>
</table>

或者使用计算机，这样你就可以（a）对逻辑进行单元测试，（b）再次使括号可选：

function Vm(urlBaseVm){
  var self = this;
  self.SiteID = ko.observable("AX123");
  self.SiteName = ko.observable("My Site");
  
  self.hrf = ko.computed(function() {
    return urlBaseVm.rootBaseUrl() + self.SiteID();
  });
}

function RootVm(){
  var self = this;
  var index = window.location.toString().indexOf("RiskOrder");
  var baseURL = window.location.toString().substring(0, index);
  
  // On SO Snippets window.location works differently so we hack it:
  baseURL = "https://example.com/my-website/url/";
  
  self.rootBaseUrl = ko.observable("");
  self.rootBaseUrl(baseURL);
  self.SiteList = ko.observableArray([new Vm(self)]);
}

ko.applyBindings(new RootVm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<table>
  <tbody data-bind="foreach: SiteList">
  <tr>
    <td>
      <h3><a data-bind="text: SiteName, attr: { href: hrf }"></a></h3>
    </td>
    <td>
      Second column
    </td>
  </tr>
  </tbody>
</table>

在foreach循环中使用$ root值设置href

1 个答案: