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

Question

第一 td 列中的 link 在尝试绑定到 $root.rootBaseUrl 时突然消失。

在第二个 td 列中，相同的 rootBaseUrl observable 打印完美。

不同之处在于，在第一个 td 列中，我试图将值设置在 attr: 内。

此外，请注意在 tbody 级别发生了 foreach 循环。因此使用 $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>

如果您将它用作绑定中的 only 东西，括号是 optional:

<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

Set href using $root value within foreach loop

javascript

href

knockout.js