Question

--- ---编辑我在项目的Github上问过这个问题，并且已经表明他们没有按照我想要的那样去做：https://github.com/Shopify/dashing/issues/617#issuecomment-142762194

您无法使用DOM，一些JavaScript库（如 React）通过使用更快的Virtual DOM来解决这个问题然后只渲染实际改变的内容。 Batman.js很可能重新渲染一切。

--- /编辑---

我使用Dashing框架创建拉取请求构建状态的仪表板，从Attlassian Stash和Jenkins中提取信息。我为此创建的Dashing小部件与Dashing附带的默认List小部件非常相似。

我打算使用Raspberry Pi将HDMI输出到我办公室的电视机上。我有一个问题，因为每次Dashing小部件接收数据时，仪表板刷新都会很慢。列表元素在一两秒内单独弹出。这让我和我的团队在视觉上分散了注意力（我甚至收到了其他团队的投诉！）。

我对html / js缺乏经验，但我猜这是因为许多DOM树遍历花了一些时间在慢速处理器上。我想要解决这个问题的方法是让窗口小部件在后台创建新的DOM，但是推迟渲染它直到整个事情都准备就绪。通过这种方式，我希望看到更多无缝过渡。

这是可能的，还是在Dashing中是合理的（或者是在它上面构建的框架/库（Sinatra，Batman.js））？如果没有，是否还有其他途径可以实现无缝Dashing更新？

我的小部件代码如下：

窗口小部件/支链/ branches.coffee：

class Dashing.Branches extends Dashing.Widget

窗口小部件/支链/ branches.html：

<h1 class="title" data-bind="title"></h1>

<ul class="items list-nostyle">
  <li class="item" data-foreach-item="items" data-bind-class="item.status">
    <span class="label branch_name" data-bind="item.branch_name"></span>
    <span class="label status" data-bind="item.status"></span>
    <div class="clearfix" />
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

窗口小部件/支链/ branches.scss：

$value-color:              #FFF;
$background-color:         #000000;
$background-error-color:   #A31F1F;
$background-passed-color:  #8fb347;
$background-pending-color: #47bbb3;
$background-notbuilt-color: #808080;

$title-color:       rgba(255, 255, 255, 1);
$label-color:       rgba(255, 255, 255, 0.7);

.widget.branches{

  background-color: $background-color;
  padding: 0px;
  vertical-align: top;

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
  }

  .items{
    list-style: none;

    li {
      margin-top: 5px;

      &.FAILURE {
        background-color: $background-error-color;
      }

      &.PENDING {
        background-color: $background-pending-color;
      }

      &.NOTBUILT {
        background-color: $background-notbuilt-color;
      }

      &.SUCCESS {
        background-color: $background-passed-color;
      }

      .label {
        display: block;
        color: $label-color;
        font-size: 20px;
        word-wrap: break-word;

        &.branch_name {
          float: left;
          text-align: left;
          padding: 5px 0px 5px 10px;
        }

        &.status {
          float: right;
          text-align: right;
          padding-top: 10px;
          font-size: 14px;
          padding: 11px 11px 5px 5px;
        }
      }
    }
  }
}

Dashing框架：延迟渲染直到加载DOM

0 个答案: