Bunnie's Blog: render

顯示具有 render 標籤的文章。顯示所有文章

2015年11月18日星期三

ParseReact實作（五）--query出10個最近的點,顯示在map上面

其實在第二篇我們就寫過，找出十個最近的點，利用的是parse query的near()，可是問題來了！我們現在輸入一個點就會更新一個點，所以TodoItem（存輸入地址的table）跟Taipei（存所有診所的table）不能同時運作，因為我們要等輸入的更新過後才能query他去找最近的點，我們上一篇看到observe()只有一次，可是又只能在裡面query

我現在基本的想法是，將結果的10個點組成array傳入Map.js，在Map.js中把addMarker()放在迴圈中，如此就可在同一地圖上畫出很多點。

我嘗試將死的點餵給他，（每次都先從最笨的開始哈哈哈哈）

出現的結果，點擊還能有文字內容

目前我的問題是，我將讀進來的點存到parse的table，並同時利用這個點去query.near（）,找到10個點之後我將它存成一個2D array。

第一：我要怎麼通知TodoList我的array已經產生好了？console.log上面顯示的順序看來，每次還沒產生完新的object，Map的lat、lng就已經被render了啊！！！

第二：如果這樣的方法不可行，我就必須在observe()裡面就產生query，那query裡面可以傳參數嗎？例如：

new Parse.Query('Taipei').near("location",new Parse.GeoPoint( lastItem.lat, lastItem.lng))

結果：

雖然結果是不行，但是我覺得是因為看不懂lastItem是什麼，畢竟他是一個query，如果可以把輸入的點keep住，這個方法或許可行。

第三：以程式順序來說，observe()的query是最先執行的，然後再透過render去呼叫其他需被傳入的參數，可是！！！！為什麼明明在後面被呼叫的 ParseReact.Mutation.Create可以trigger到query？因為輸出的query是有增加新object的，這表示其實query不用更新嗎？只要mutation到他就會自己被更新嗎？

結合以上第二第三，我們將點定義為global變數，然後在query中使用它

定義一個新的nearbyItems來使用near()，並且在render的時候多一個nearbyItems的map來傳最近的十個點給Map，現在的問題是：
Map不能分開，我原來的想法是在lastItem傳兩個參數進去，在nearbyItems再傳兩個進去，這樣一來中心點跟需要被加上去的十個點可以分開處理，可是結果好像不行，有這樣的訊息

於是我把兩個呼叫Map的四個參數全部補滿

雖然可以了可是這麼做會有很多問題：

第一：會傳五次lat lng給map，可是新的紀錄會一直洗掉前一個，變成只出現一張地圖卻有10張空白地圖的位置，因為實際上我們只要傳一次lat lng就好了啊幹嘛傳10次

第二：LastGeoPoint完全沒有更改到，前面一開始的宣告只是為了可以去query near的點，但是接下來在lastItem內做overwrite的時候就沒辦法了，global變數完全不為所動，以至於接下來沒辦法去用LastGeoPoint

第三：map不能拆開，一次就要給他全部需要接收的參數，不能這邊給兩個下一次再給另外兩個，問題是就是要不同的query才能給

我真的是快被卡死了.................

2015年11月17日星期二

ParseReact實作（四）--輸入地址就更新地圖

在上一篇我們指定死的座標給地圖成功之後，現在我們要動態去更改它的座標位置，當然第一步我們要先把Map.js中的程式碼全部都變成繼承TodoList.js傳入的參數，將原來的數字部分都改成this.prop.參數名稱。

再從TodoList.js去處理傳入的參數。
首先，第一個問題就是，我們是要從parse的table中取出資料，而不是在輸入的時候讀入資料，TodoList.js的結構是先query再render顯示

那observe()是哪裡來的？又是做什麼？
我們來看到ParseReact的document

https://github.com/ParsePlatform/ParseReact/tree/master/docs/api

在當中我們可以看到有細分許多，例如ParseReact.Mixin 還有 ParseReact.Mutation等等，看過之後我在Mixin中發現了observe（），意思就是說ParseReact中有一個Mixin的class中有一個observe function，追溯下去他的功能，我們在library中的Mixin.js中定義出observe()是一個query的必要function，傳入的參數是props跟state，也就是query起初的定義function，你要是不定義會有error message

'Components using ParseReact.Mixin must declare an observe() method.'

前提是！！！！這是export default class TodoList extends ParseComponent 才能用的喔，如果是一般的React .createclass是沒有這個function可以使用的。

在上面的程式碼可以看到我們將TodoItem這個加入條件後的query指給items，然後在render的地方使用this.data.items.map(function(i) show出所有的items，可是我只有一個地圖啊，我只能傳一次參數給map不然會show出超多map，要怎麼樣讓query只傳一個object給items呢？

沒錯！！！！利用parse的limit(數量)，在這之前我們也試過用first()，可是first是一個需要回傳的function，我們其實只需要一個條件就夠了，沒辦法在裡面再加一個function，於是我們就在observe裡面放了兩個query~~~~一個給List show出來用，一個給Map的參數用。

然後在render的地方傳給他們

其實到這裡我還是有兩個問題：
第一：傳給map()的是object(也就是i)，為什麼只要傳給他object就可以自動找出誰是lat誰是lng呢？
object log出來長這樣

第二：observe()是建立了query沒有錯，可是在哪裡執行？沒有query.find()也沒有query.first()，到底怎麼執行的？

但是還是成功了～～～～

耶嘿～～～～～～～～
請專業的大家幫我想一想到底答案是啥，我會萬分億分感謝您！！！！

2015年10月18日星期日

React tutorial 中文版

看完React.js的官方tutorial之後，我只有一句話想問：到底寫這麼抽象是給誰看......
這種東西不是應該要有圖嗎！！！！誰接誰哪裡看得懂啊，於是乎我決定狠下心來用我的破英文假裝翻譯一個新的中文官方網站，然後寄給官方哈哈哈
首先在這篇tutorial中我們會學到三個大方向
ㄧ、留言板的view
二、提交留言的表單
三、動態的資料更新
先來下載官方的react-tutorial

我們要先架一個假server，用terminal到根目錄之後用

即可在 http://localhost:3000/ 看見成功的demo。
在這裡我有一個笨問題，為啥是port3000？主管大大說每個port都有定義過的傳輸型態，由你傳輸的內容來決定你是哪個port，像FTP(File Transform Protocol )就是固定21port，3000屬於自己可以定義的範圍，可以讓code在上面跑。

接下來HTML中該include的就include

設定都好了之後重頭戲來了
先稍微講解一下此project的結構

我來畫個圖解釋一下我們所看見的view的樣子

建立第一個Component---CommentBox，利用最基本的<div>

！！！注意！！！在react.js中，以小寫開頭的tag是html中本來就存在的tag(像是<div>,<span>,<p>.....)而以大寫開頭的則是我們自己建立的tag(像是<CommentBox />）
可以自己建標籤？這是什麼？這就是XML的架構啊。所以將JavaScript配上XML，成為了JSX。
很多人都說看不懂JSX是什麼，我這麼菜更是看不懂了......
不用擔心，其實上面的程式碼經過babel的翻譯會變成

原來標籤的部分其實就是createElement而已，經由呼叫render來return資料。
我們剛剛經由React.createClass()來建立一個新的React components，而最重要的是一定要呼叫render，他才會回傳React components的樹狀結構，最後render給HTML。
<div>在DOM中並不是一個真實的節點，只是屬於React中的<div> Component，由於不是真實節點，React可以避免XSS的竄改攻擊。

什麼是XSS?

會建立Component之後，我們要學著如何把他們組起來。
在同個js中加入CommentList 和 CommentForm

然後把原來的CommentBox寫死的內容改掉，變成render CommentList 和 CommentForm這兩個Component

關係就是

最後的ReactDOM.render，我們就只需要render CommentBox這個Component就好了。ReactDOM.render具有container的概念，他會去看container中哪些element有改變，只需重新render更改的element，所以一定要放最後面，才能看到所有element。

接下來要談的是props屬性，在一個Component中可以存在多種屬性，例如CommentList會有發表者、內容、時間等等.....prop屬性可以繼承父母親的屬性，並且用prop來接收父母親的資料，例如this.props就是拿來接收父母親Component中的某種屬性的內容。

我們可以利用 {this.props.author} 來接收到CommentList中餵給Comment的屬性，{this.props.author} 就是接收author這個屬性的內容，那其他nested的內容（例如text）就是{this.props.children}。

Adding Markdown的部分只是為了防止xss的入侵，這部分就不多加撰述。

資料指定成功之後，我們再進一步，改成讀入一個可變動的JSON File。

第一步我們要先在CommentBox的render中先定義好接收的資料的名字，所以我們可以看到，<CommentBox data={data} />表示{data}是讀入的json file，然後把讀入的資料指給在CommentBox中的data。如此一來，CommentBox的小孩就可以用{this .prop.data}去接收。

第二步，在上述程式碼中，CommentList data接收到的資料傳入CommentList之後，利用 this.props.data.map（其實這就類似於for each）的概念，可以把每個Comment中的元素都讀出來，再把傳回來的東西指給他的小孩--comment，並且把所有讀出來的都集中在 commentNodes這個集合變數中。

資料流向圖說明

到目前為止，我們看到了很多prop，那prop的特性是取決於爸爸，對於接收的小孩來說，那是不能更改的(immutable)。所以我們要介紹另外一個--state，可以透過this.setState()區呼叫，這是屬於component自己的狀態，不屬於他的父親，是可以做更改的。

要利用state有兩個步驟

第一：我們要先initial state

第二：再將要傳送的data={this.state.data}

其實只被比原來的props多了一個initial的動作。

接下來是動態讀入的部分，這個時候就要提到MVC的觀念，我們來複習一下

對我們來說，先前讀入的JSON File就是Model，利用擷取的新資料來更新view，而接收action去處理data的就是Controller，等等我們會介紹那些接受action的function，Render就是呈現view，屬於React.js負責的部分。

現在假裝我們給了一個server，

利用ajax去讀入server給的東西，componentDidMount是一個React的function，當component重新render的時候會被呼叫，所以當動態讀入時會一直呼叫這個function，要把動態讀入的程式碼都放在裡面。重點是！！！！！用this.setState()就可以更改component自己所屬的state，呼應了前面說的，props無法改變的特點。

tutorial真的寫得很麻煩（哈哈哈哈偷罵），他又把ajax動態讀入的程式碼獨立出來，定義為loadCommentsFromServer，再在componentDidMount呼叫他，其他部分都一樣喔，ReactDOM.render還是只render CommentBox。