iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

RRRR的世界 (Ruby on Rails + React + Redux)系列 第 21

Day 21, Reading List - React部分-3

  • 分享至 

  • xImage
  •  

今天,首先貼上updateBook的ajax

先 npm install rx-dom;

reload all books

//in clients/app/bundles/containers/ReadingList.jsx

  allBooks(bookAttributes) {
    let settings = { url: Routes.books_path(), responseType: 'json'}
    RxDOM.ajax(settings)
    .subscribe(
      (data) => {
        let books = data.response.books;
        this.setState({books});
      },
      function (error) {
      }
    );
  }

delete book

//in clients/app/bundles/containers/ReadingList.jsx
  deleteBook(id) {
    let settings = { url: Routes.book_path(id), responseType: 'json', method: 'DELETE'}
    RxDOM.ajax(settings)
         .subscribe(
            (data) => {
            },
            (error) => {
            }
          );
  }

create / update book

  updateBook(bookAttributes, id) {
    let settings = id == 0? { url: Routes.books_path(), responseType: 'json', method: 'POST', body: bookAttributes} :
                          { url: Routes.book_path(id), responseType: 'json', method: 'PUT', body: bookAttributes}
    RxDOM.ajax(settings)
          .subscribe(
            (data) => {
              let books = data.response.books;
              console.log(books);
              this.setState({books});
            },
            function (error) {
            }
          );
  }

update book status

  updateBookStatus(id, status) {
    let settings = {
      url: Routes.status_book_path(id),
      responseType: 'json',
      method: 'POST',
      headers: {
        'X-Requested-With': 'RxJS',
        'Content-Type': 'application/json;charset=utf-8'
      },
      body: JSON.stringify({book:{status: status}})
    }
    RxDOM.ajax(settings)
          .subscribe(
            (data) => {
              let books = data.response.books;
              this.setState({books});
            },
            function (error) {
            }
          );
  }

然後 修改他的render

//in clients/app/bundles/containers/ReadingList.jsx

  render() {
    return (
      <div>
        <ReadingListWidget books={this.state.books}
                           updateBook={(attributes) => this.updateBook(attributes)}
                           updateBookStatus={(id, status) => this.updateBookStatus(id, status)}
                           deleteBook={(id) => this.deleteBook(id)}/>
      </div>
    );
  }

其他還要加一些controller update_status

  def update_status
    status = params[:status]
    respond_to do |format|
      if @book.update(book_params)
        @books=Book.includes(:author)
        format.html { redirect_to @book, notice: 'Book was successfully updated.' }
        format.json { render action: :index, status: :ok, location: @book }
      else
        format.html { render :edit }
        format.json { render json: @book.errors, status: :unprocessable_entity }
      end
    end
  end

帥慘~終於結合起來了!!當然還有children的props沒打,
詳細請看https://github.com/josephMG/itHelpRRRR!!

打完可以洗洗睡了!!


上一篇
Day 20, Reading List - React部分-2
下一篇
Day 22, Redux - 先理解一下
系列文
RRRR的世界 (Ruby on Rails + React + Redux)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言