Javascript 每个装订的敲除

我在使用knockout

foreach

绑定为不同的

datetime

显示不同内容时遇到问题

一切正常，但一个主要问题是函数

showData

和

getDataByCurrentDate

我创建了一些示例代码来说明我正在尝试做什么：

这是我的JavaScript代码：

       var data = { "Blog": [
         {
           "date":"07/09/2012",
           "title":"Title 1",
           "content":"Text 1"
         },
         {
           "date":"08/09/2012",
           "title":"Title 2",
           "content":"Text 2"
         },
         {
           "date":"09/09/2012",
           "title":"Title 3",
           "content":"Text 3"
          },
          {
           "date":"10/09/2012",
           "title":"Title 4",
           "content":"Text 4"
          }      
         ]
       };

       var current = new Date();

       function formatCurrentDate() {
         return ('0' + current.getDate()).slice(-2) + '/' + ('0' + (current.getMonth() + 1)).slice(-2) + '/' + current.getFullYear();
       }

       function getDataByCurrentDate() {
         var output = [];
         for(var i in data.Blog) {
           if(data.Blog[i].date== formatCurrentDate()) {
             output.push(data.Blog[i]);
           }
         }
         return output;
       }

       function showData(data) {
         var output = 'No data';
         if(data.length > 0) {
           for(var i in data) {
             self.findDataBlog.push(data1[x]); 
           }
         }
       }
       function loadData() {
         var data = getDataByCurrentDate();
         showData(data);
         showCurrentDate();
       }

       function showCurrentDate() {
         document.getElementById('currentDate').innerHTML = formatCurrentDate();
       }

       window.onload = function() {
         loadData();

         document.getElementById('next').onclick = function() {
           current.setTime(current.getTime() + 1000*60*60*24);
           loadData();
           return false;
         }

         document.getElementById('previous').onclick = function() {
           current.setTime(current.getTime() - 1000*60*60*24);
           loadData();
           return false;
         }
       }

这是

正文

标签：

        <a href="#" id="previous"> << </a>  
        <span id="currentDate"></span>
        <a href="#" id="next"> >> </a>

        <div data-bind="foreach: findDataBlog">
          <ul>
            <li>
             <a>
              <h1><span data-bind="text: title"></span></h1>
              <p>
                <span data-bind="date: date"></span>
                <span data-bind="text: content"></span>
              </p>
             </a>
            </li>
          </ul>
       </div>

我在这里为您创建了一个工作JSFIDLE：

我所做的主要更改是在

showData（）

函数中引入了一个淘汰

viewModel

变量并修复了错误：

var myViewModel = {
    findDataBlog = ko.observableArray();
}

ko.applyBindings(myViewModel);

...

function showData(data) {
    myViewModel.findDataBlog.removeAll()
    if (data.length > 0) {
        for (var i in data) {
            myViewModel.findDataBlog.push(data[i]);
        }
    }
}

经修订的html：

<a href="#" id="previous"> << </a><span id="currentDate"></span>
<a href="#" id="next"> >> </a>

<br />
<span data-bind="visible: findDataBlog().length == 0">no data</span>
<div data-bind="foreach: findDataBlog, visible: findDataBlog().length > 0">
    <ul>
        <li> <a>
              <h1><span data-bind="text: title"></span></h1>
              <p>
                <span data-bind="date: date"></span>
                <span data-bind="text: content"></span>
              </p>
             </a>

        </li>
    </ul>
</div>

没有数据

如果我们知道问题所在，很难给出答案。。。你到底犯了什么错误？您期望得到什么样的输出？顺便说一句，data1似乎没有在任何地方定义，但您将其中的元素添加到一个数组self.finddatalog（我们也看不到其中的定义，尽管我可以猜self是这个，finddatalog是一个（可观察的？）数组）-这是一个输入错误还是可能是问题的根源？问题是什么？您需要发布更多的javascript代码，并实际解释问题所在。好的，我在

未捕获引用错误：data1未定义上创建页面是的，我把它放在上面了，我没有提到我在脚本开始时就放了它。。我认为问题在于我称之为showData，因为我总是获取一天的数据……您的示例很好，但如何禁用重复项（尝试使用左箭头和右箭头，并使用数据返回最新状态）很酷。我已经相应地更新了我的答案。请随意接受：）
<a href="#" id="previous"> << </a><span id="currentDate"></span>
<a href="#" id="next"> >> </a>

<br />
<span data-bind="visible: findDataBlog().length == 0">no data</span>
<div data-bind="foreach: findDataBlog, visible: findDataBlog().length > 0">
    <ul>
        <li> <a>
              <h1><span data-bind="text: title"></span></h1>
              <p>
                <span data-bind="date: date"></span>
                <span data-bind="text: content"></span>
              </p>
             </a>

        </li>
    </ul>
</div>